jquery bind event with ajax content

Question

We have an external js file loaded on our static html page with a jQueryUI dialog opening a url with jQuery.load() from a button click. Inside the ajax content returned is a handful of input elements, all number type. We need to bind the keydown and change events to the number inputs, however it's not binding since the .bind() is happening before the elements are in the DOM from the ajax result. We know about .on() but having an awfully hard time wiring it up. I know we're missing something simple; any suggestions?

Basic Fiddle recreation: http://jsfiddle.net/jbwebtech/wvufLket/

[Understanding Event Delegation.](http://learn.jquery.com/events/event-delegation/) — Ram, Oct 21 '15 at 20:44

Roko C. Buljan · Accepted Answer · 2015-10-21T20:45:38.573

There's nothing too hard to grasp that it's not already explained pretty decently inside the jQuery .on() documentation: http://api.jquery.com/on/#direct-and-delegated-events
http://learn.jquery.com/events/event-delegation/

$(staticElementParent).on("event1 event2", dynamicElement, function(){ /*stuff*/ });

In your specific case:

fiddle demo

var ajax_content = '<input type="number"><br><input type="number"><br><input type="number"><br><input type="number">';

$(function () {

    console.log('jquery ready');

    $("body").on('input', 'input[type=number]', function (event) { 
        console.log('on() input successful');
    });

    // "AJAX" ;)
    $('button').click(function(){
       $('#ajax_container').html(ajax_content);
    })

});

As always, read the Docs

thanks for the example; I was unable to get it working with the explanations in the jquery docs, hence my post. Ciao. — jbwebtech, Oct 22 '15 at 00:57

score -1 · Answer 2 · answered Oct 21 '15 at 20:38

Can't you just put your bind the callback of the .load() function? Or if you can't(im not sure), you can change a variable in the callback and check if it's loaded in the bind.

Or you can put the bind in the file that loaded with jquery(at the end of it).

Sorry, i can't comment yet.

jquery bind event with ajax content

2 Answers2