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);
});

@papirtiger i was trying to emulate in JS fiddle of what is happening in my code — stud91, Jul 19 '14 at 11:03

max · Answer 1 · 2014-07-19T11:24:33.500

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();

edited Jul 19 '14 at 11:24

answered Jul 19 '14 at 11:04

max

96,212
14
104
165

the alert dialog box appears blank – stud91 Jul 19 '14 at 11:08
Well for starters the html is nothing like what you have in your example. ´.title´ is not a sibling of the button. – max Jul 19 '14 at 11:17
where do i add this event class? in
?

stud91

Jul 19 '14 at 11:31

score 0 · Answer 2 · answered Jul 19 '14 at 10:56

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).

e.g.

$(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.

score 0 · Answer 3 · answered Jul 19 '14 at 10:56

0

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(){...})

answered Jul 19 '14 at 10:56

Keo

1,143
8
19

Rehmat · Answer 4 · 2014-07-19T11:53:47.873

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();

score -2 · Answer 5 · answered Jul 19 '14 at 10:54

-2

try this

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

answered Jul 19 '14 at 10:54

Ramzan Zafar

1,562
2
17
18

Why will this work? How is this different than what the OP already is doing? – Adam Jenkins Jul 19 '14 at 10:55
He is using click method which will not work for dynamically created DOM object we should use "on" event of Jquery ....And i am using this – Ramzan Zafar Jul 19 '14 at 10:56
`.click()` is simply an alias for `.on('click'` - it does not change event delegation. – Adam Jenkins Jul 19 '14 at 10:58
no that is not the case see here http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click – Ramzan Zafar Jul 19 '14 at 11:01
it **is** the case - if you want to do it correctly the you have to use it like this: `$(ssome_delegate_element).on('click','button',function() { });` – Adam Jenkins Jul 19 '14 at 11:02

Making jQuery function work with ajax call

5 Answers5