CODEWITHSUNDEEP
ajaxjquery
elisium
elisium

Reputation: 318

How to bind event after ajax success in jQuery

So here is my code:

$(document).ready( function() {
$('#form').bind('change', function(){
    $.ajax({
    type: 'get',
    url: 'api.php',
    data: 'task=getdirs&formname='+$('#form').attr('value'),
    dataType: "text",
    success: function (html){
        $('#chdir').html(html);
        $('#chdir select').bind('change', getDirs());
        }
    });
});
function getDirs(){
}})

#form here has a <select> element. The ajax call returns a piece of html with a new <select> element.
It works nice: in the #chdir div I get a new dropdown element. But the event inside the success part fires only once. Then this event does not work anymore at all.
What can I do to make the newly created <select> element work in the same way as the first?

Upvotes: 6

Views: 20226

Answers (6)

Daniel
Daniel

Reputation: 18672

If you're using jQuery 1.9+, .on method should be used to attach event handlers. However, after appending HTML to document you still have to attach new event handlers.

To write small piece of simple, working code and handle new elements you can use .on on document:

$(document).on('click', '.close-icon', function() { // selector as a parameter
    $(this).parent().fadeOut(500); // - example logic code
});

Upvotes: 2

Alex Weber
Alex Weber

Reputation: 2186

If I understand you correctly, the problem is with the event not working with your dynamically created select element.

If so, the solution is simple...try this:

$('#form').live('change', function()...

Update: With newer versions of jQuery you have to use on() instead of live().

Upvotes: 2

Nendrel
Nendrel

Reputation: 83

From the jQuery API:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

So you should use .delegate() if you are working with a jQuery version previous to 1.7.

http://api.jquery.com/live/

Upvotes: 0

Dave Baghdanov
Dave Baghdanov

Reputation: 2358

Because this SO post came up in my google search, I thought I should mention that .live has been deprecated as of 1.9, and the recommended method is now .on

http://api.jquery.com/on/

Upvotes: 3

Christian C. Salvad&#243;
Christian C. Salvad&#243;

Reputation: 827316

You are invoking the getDirs function directly on the bind method call, you should only do it if this function returns another function, but I think that's not the case.

Change: 

$('#chdir select').bind('change', getDirs());

To:

$('#chdir select').bind('change', getDirs);

Or if you are using jQuery 1.4+, you can bind the change event with the live method only once, and you will not need to re-bind the event after that:

$(document).ready(function () {
  $('#chdir select').live('change', getDirs);
});

Upvotes: 10

marcgg
marcgg

Reputation: 66436

Instead of using bind, try using .live. You'll need the latest version of jQuery to do that.

Upvotes: 0

Related Questions