如何绑定jQuery ajax成功后的事件

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?

这里的#form有一个元素的html片段。它工作得很好:在#chdir div中我得到一个新的下拉元素。但成功部分中的事件只触发一次。那么这个事件就不再起作用了。如何使新创建的

6 个解决方案

#1

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.

你直接在bind方法调用上调用getDirs函数，你应该只在这个函数返回另一个函数时才这么做，但我认为不是这样的。

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:

或者如果您使用jQuery 1.4+，您只能用live方法绑定一次变更事件，之后不需要重新绑定事件:

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

#2

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

因为这篇SO文章出现在我的谷歌搜索中，所以我想我应该提到。live在1.9中已经被弃用，推荐的方法现在是。on

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

#3

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

如果我理解正确，问题在于事件没有与动态创建的select元素一起工作。

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

更新:新版本的jQuery必须使用on()而不是live()。

#4

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.

如果使用jQuery 1.9+，则应该使用.on方法附加事件处理程序。但是，在将HTML附加到文档之后，仍然需要附加新的事件处理程序。

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

#5

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

不要使用bind，尝试使用。live。您将需要最新版本的jQuery来实现这一点。

#6

From the jQuery API:

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

在jQuery 1.7中，.live()方法被弃用。使用.on()来附加事件处理程序。老版本的jQuery用户应该使用.delegate()来选择。live()。

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

因此，如果使用的是之前的jQuery版本，应该使用.delegate()。

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

#1