This code is suppose to add an onClick event to each of the a elements, so that clicking on the element would load the content of the page dynamically into a DIV.
Now, I got this far - It will add the onClick event, but how can I load the dynamic content?
$(document.body).ready(function () {
$("li.cat-item a").each(function (i) {
this.setAttribute('onclick','alert("[load content dynamically into #preview]")');
});
});
Thank you.
$(document.body).ready(function () {
$("li.cat-item a").click(function (e) {
$('#this-is-your-target-div').load(this.href);
e.preventDefault();
});
});
See the documentation for jQuery ajax functions here: http://api.jquery.com/category/ajax/.
$(document).ready(function () {
$('li.cat-item a').bind('click', function (e) {
$('#preview').load($(this).attr('href'));
e.preventDefault();
});
});
There is an extensive amount of AJAX functions in jQuery: http://api.jquery.com/category/ajax
$("li.cat-item a").click(function() {
$.get($(this).attr('href'), function(data) {
$("#preview").html(data);
});
});
Does an AJAX request using $.get which is more easier to read imho to the href attribute of the clicked element, and puts the retrieved data into the div preview.
Use $('div.container').html(htmlString);
where htmlString is the html code of the content you want to place inside the div with class container
Related
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
$.getJSON('http://anyorigin.com/get?url=microsoftwebpro.com&callback=?',
function(data){
$('#output').html(data.contents);
$('a').each(function() {
$(this).attr('href', 'http://anyorigin.com/get?url='+$(this).attr('href')+'&callback=?');
});
});
$('a').click(function() {
$.getJSON($(this).attr('href'), function(data) {
$('#output').html(data.contents);
});
});
But I can't seem to figure out why it isn't loading in the right order.
So for example, I want it to load the contents from another domain, then add an add filter href to all the links in the "output" div and only that div(not working)
And then if I click a link it updates the "output" div instead of actually navigating to the link.
One solution is to bypass changing the <a> elements and just capture the clicks. Since you're dealing with dynamically created elements, it will probably be easier to use Event Delegation:
function AnyOriginURL(url) {
return 'http://anyorigin.com/get?url='+url+'&callback=?';
}
function Navigate(url) {
$.getJSON(AnyOriginURL(url), function(data){
$('#output').html(data.contents);
});
}
// When clicking any <a> inside the #output...
$("#output").on("click", "a", function(e) {
// Prevent click from triggering navigation
e.preventDefault();
// And Navigate there using our method
Navigate($(this).attr("href"));
});
// Onload, start at this base page
$(function() {
Navigate("microsoftwebpro.com");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
Take heed: When using this example, the website is very slow to load
I have a module that was built using a Handlebars.js template, I orignally had it opening and closing perfectly, but the information wasn't updated, this can be seen here.
Now I have it so it updates the info, but the toggleClass won't fire when clicking either the 'x' or .overlay. This can be seen here.
Here is my jQuery functions to activate the modal.
$(document).on('click', "a.btn", function (e) {
$(e.target).parents('.image-container').prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.overlay', function (e) {
$(e.target).prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function () {
$('.modal').toggleClass('modal--show');
});
How can I make it so this modal will both Open and Close, as well as display the correct information?
Some things I've tried...
replacing: $(e.target) with $(this)
The problem with your code is that you are trying to toggle class of all .modal divs. But you need to toggle the class of only .modal.modal--show.
Also in case of overlay, you need to find the parent div not the sibling div. So use .closest() in place of .prev()
So if you modify your code as
$(document).on('click', '.overlay', function (e) {
$(e.target).closest('.modal.modal--show').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function () {
$('.modal.modal--show').toggleClass('modal--show');
});
i have this HTML code on a page when my page loaded:
<div class="divmain">Add
<span class="spn">123</span>
</div>
when you click on that span it will create another span and show hi alert to you,
when the page loaded for the first time it works fine and write another span on that dive as the same the old span but after that if you click on the new span it works not.
i did some test and found if i add this code :
$('.spn').on("click", function (e) {
showalert(this);
});
on the "spanwriter" function it will works , i mean if that function be like this:
function spanwriter(master) {
var rows = '<span class=\'spn\'>123</span>';
$('.divmain').html(rows);
<------- this event must be add here until it --------------->
$('.spn').on("click", function (e) { works
showalert(this);
});
}
why i should add click event at the end of wrote content until span can get that event and works?
i used jquery-1.10.2.js on my sample
my all codes are:
$(function () {
$('.divmain').on("click", function (e) {
spanwriter(this);
});
$('.spn').on("click", function (e) {
showalert(this);
});
});
function spanwriter(master) {
var rows = '<span class=\'spn\'>123</span>';
$('.divmain').html(rows);
}
function showalert(master) {
alert("hi");
}
you have to do the same but with document.on("click")
$(document).on("click", ".buttonClass", function() { console.log("inside"); });
$('.divmain').on("click" make a kind of binding when document is loaded, so when you add dynamix elements to the dom it is noit catched. Whith the use od document.on, it works even if you add dynamic content to the document.
The simplest and best solution to your problem is to attach the event listener to a parent element in the dom and pass the second parameter of the on() method as described in the jQuery documentation (http://api.jquery.com/on/)
In other words you should have something along the lines of:
$('body').on("click", ".spn", function (e) {
showalert(this);
spanwriter(this);
});
and then have the spanwriter() add the new span to the parent of the element it's been called upon.
I hope this is what you were looking for and answers your question.
I'm trying to fire a click event on the click of an element inside an iframe, but it doesn't seem to be working. My current set up:
jsFiddle: http://jsfiddle.net/q4aa3/
jQuery:
$(document).ready(function () {
$('#this-iframe').load(function () {
$('#this-iframe').contents().find('img').live({
click: function () {
alert('clicked img');
}
});
});
});
Clicking on the image inside the iframe isn't firing the alert, I'm not sure why, or is there a better way to achieve this? Any suggestions would be greatly appreciated!
When you have the iframe on the same domain, you can use this script to catch clicks in the iframe. Don't use .live, it is depriciated as of jQuery 1.7.
var iframeBody = $('body', $('#iframe')[0].contentWindow.document);
$(iframeBody).on('click', 'img', function(event) {
doSomething();
});
You can manipulate the body through the iframeBody variable.
I have a set of images that are loaded via jQuery AJAX. For some reason, my click handler won't trigger when it is clicked.
JavaScript:
$(document).ready(function()
{
$('img.delete_related_sub').click(function()
{
alert('testing');
});
//I added this part to test, because the above wasn't working...
$(document).click(function(event)
{
alert(event.target.tagName+' '+event.target.className);
});
});
HTML:
<img data-rsid="2" class="delete_related_sub" src="image.png" />
So my 2nd click handler alerts me with "IMG delete_related_sub". But the first one isn't triggered. The is actually in a table that is actually in a pane run by bootstrap tabs, not sure if that'd actually help though.
Try it like this
$(document).on('click', 'img.delete_related_sub', function() {
alert('testing');
});
Just replace document with a static parent of your image.
Use this:
$("body").on('click', 'img.delete_related_sub', function() {
alert('testing');
});
Or, in the success: give this:
$('img.delete_related_sub').click(function() {
alert('testing');
});
Because the line to bind the event runs before the element is added, try using
$(parent).on('click', 'img.delete_related_sub', function() {});
where the parent is a static element that will be there for sure. This works because the event is bound to an element that actually exists, then checks to match your selector. See .on() for more details.
Something like
$(document).on('click', 'img.delete_related_sub', function() {});
would work fine.
$('.delete_related_sub').live("click", function()
{
alert('testing');
});
Use live event to listen clicks