Call JavaScript function when button loaded by ajax is clicked

Question

I have an html form that loads its contents through ajax and includes buttons that, when clicked, should execute a JavaScript function that is defined in the html page's script tag. SO: Button is loaded through ajax (works), but when button is clicked, it doesn't trigger the desired action and doesn't trigger a JavaScript error in Firebug. How does one get the onclick signal of a bunch of buttons loaded through ajax to bind to an already existing JavaScript function?

EDIT: I should have noted also that I am not using JQuery. I am willing to do so if it is the only way, but otherwise, I would prefer to use only native JavaScript.

EDIT2: My problem was a bit more involved, but as was stated in the chosen answer, you should be able to set the onclick event handler in the php script before sending the data through ajax. If you have a data-heavy response and want to reduce bandwidth, you might consider doing everything client-side, but I find it easier in most situations just to set the onclick attribute in the php script.

http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — sdespont, Feb 15 '13 at 17:05

score 2 · Accepted Answer · answered Feb 16 '13 at 02:44

2

Your dynamically generated button could have an inline event bound to it. When generating the button, simply make sure it has an onclick="alreadyExistingFunc();" and the page will happily execute it.

Alternatively, when your AJAX data is finished writing itself into the document, find the new button(s) and bind the event to them:

function ajaxSuccess()
{
    document.getElementById('newButtonIdHere').onClick = function() {
        alreadyExistingFunc();
    }
}

That should do the trick. Also note that if you ever "need" a small part of jQuery to do something (like selectors or event handling), you can almost always do it without loading the whole library.

answered Feb 16 '13 at 02:44

Bryce

5,791
7
33
64

1

Correct answer for the question; my problem was a little bit more involved than this, and it was caused mostly by the fact that I was switching too much between javascript and php to notice I was using the wrong concat operator when constructing the post string... – Adam Feb 16 '13 at 02:57
"Your dynamically generated button could have an inline event bound to it. When generating the button, simply make sure it has an onclick="alreadyExistingFunc();" and the page will happily execute it." How is that? it's the problem itself as this situation? I face the same problem and this not solve the problem. can you clarify or explain more specifically. – Aladdin Mar 08 '15 at 10:52
1

OP's situation is that a button is inserted into the DOM without any event listeners being added to it. If for some reason you can't add event listeners with JS (perhaps due to CMS restrictions, not knowing it's ID to select it, etc) you can always rely on a button to execute an onClick="". – Bryce Mar 09 '15 at 03:08

Onur Yıldırım · Answer 2 · 2013-02-15T17:15:00.667

Append/insert the HTML (retrieved AJAX response) to DOM and bind click event to it:

function alreadyExistingFunc() { 
    alert('button is clicked!'); 
}

var ajax_data ="<button id='my-button'>My Button</button>";

$('body').append(ajax_data).find('#my-button').on('click', function(e){
    alreadyExistingFunc();
    // some more code...
});

OR:

$('body').append(ajax_data).find('#my-button').on('click', alreadyExistingFunc);

score 0 · Answer 3 · answered Feb 15 '13 at 17:23

0

You could also use a callback:

function getAjaxContent(callback) {
    $.ajax({url: "url"}).done(function() {
      callback(data);
    });
}

getAjaxContent(function (data) {
    //ajax content has been loaded, add the click event here
}

answered Feb 15 '13 at 17:23

David Aleu

3,802
3
24
48

Call JavaScript function when button loaded by ajax is clicked

3 Answers3