Making jQuery function work with ajax call

Question

I am trying to achieve something when i click the button. The button is loaded from the server using an AJAX call. However, nothing happens when the button is clicked. Here is my code:

(This ajax call is in JS Fiddle -- only for testing purposes) JS Fiddle

Code:

<div id="target"></div>

new Request.HTML({
    url: '/echo/html/',
    data: {
        html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
        delay: 0
    },
    method: 'post',
    update: 'target'
}).send();

$("button").click(function(){
    var value = $(this).siblings(".title").text();
    value += $(this).siblings(".date").text();
    alert(value);
});

Answer 1

Since the button does not yet exist you can use jQuery.on to delegate an event handler.

$("body").on('click', 'button', function(){
  var value = $(this).siblings(".title").text();
  value += $(this).siblings(".date").text();
  alert(value); 
});

Also your fiddle does not work since you are using both jQuery and MooTools but only loading MooTools.

---

Added after seeing authors page:

The var value = $(this).siblings(".title").text(); selector will not work. I would recommend adding an event class (as in calendar event) to the wrapper and using:

var value = $(this).parents(".event").find(".title").text();

Answer 2

If you are adding elements to the DOM via AJAX (or any other method) and you want listeners to remain bound to them, then you need to attach those listeners to elements in the document that don't change - like $(document) .

eg

$(document).on('click','button',function(e) {
 //your code here
});

The problem with your code is that you're getting all the buttons by doing $("button") and then attaching click listeners to them. The problem is that when you're doing this, your button hasn't been attached to the document and, therefore, will not have a click listener attached to it.

Answer 3

If button doesn't exist on page load. You can;t use $("button") to address it. You have to surround it by something else(div for example) and do it like this: $('div').on('click','button', function(){...})

Answer 4

There are 2 things you need to consider.

ONE - jQuery that is included with mootools. I was surprised that $ function in mootools version that you are using gave me a very BASIC jQuery function. I tried higher versions of mootools and still the same happened. I am sure it is not jQuery at all and mootools is just using $ variable for their purpose. [Optional: So, you may also consider defining jQuery as a different variable in your script.]

So, I added a link to latest jQuery in External Resources on jsfiddle and then it worked. Do not forget to expand External Resources on left on jsfiddle. But, if mootools is using $ for its own purpose, then jQuery will surely overwrite it. Please consider using jQuery as a different variable than $.

TWO - Use the onSuccess function of AJAX request. You call the AJAX request and so you have to wait for some time for browser to load it which depends on user's internet connection. So, this is why we use onError and onSuccess events. Write the button function in onSuccess because button does not exist on document until AJAX is loaded.

Please check this code and it works.

http://jsfiddle.net/U7ewu/ Code:

new Request.HTML({
url: '/echo/html/',
data: {
    html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
    delay: 0
},
method: 'post',
update: 'target',
onSuccess: function() {
    $("button").click(function(){
        var value = $(this).siblings(".title").text();
        value += $(this).siblings(".date").text();
        alert(value);
    });
}
}).send();

EDIT:

Please use $.noConflict(); so that mootools and jquery do not conflict each other on $ variable. $ is already being used by mootols, so please use the word jQuery instead.

Please check this jsfiddle. http://jsfiddle.net/wkMep/

Code:

$.noConflict();

new Request.HTML({
url: '/echo/html/',
data: {
    html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
    delay: 0
},
method: 'post',
update: 'target',
onSuccess: function() {
    jQuery("button").click(function(){
        var value = jQuery(this).siblings(".title").text();
        value += jQuery(this).siblings(".date").text();
        alert(value);
    });
}
}).send();

Answer 5

try this

$("button").on("click",function(){
    var value = $(this).siblings(".title").text();
    value += $(this).siblings(".date").text();
    alert(value);
});