Question

所以这是我的代码：

$(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这里有一个<select>元素。 ajax调用返回一段带有新<select>元素的html。
它很好用：在#chdir div中我得到一个新的下拉元素。但success部分内的事件只发射一次。然后这个事件根本不起作用了。
如何使新创建的<select>元素以与第一个元素相同的方式工作？

Answer 1

您正在getDirs方法调用上直接调用bind函数，只有在此函数返回另一个函数时才应该这样做，但我认为情况并非如此。

更改：

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

要：

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

或者，如果您使用的是jQuery 1.4+，则只能将change事件与live方法绑定一次，之后您无需重新绑定事件：

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

Answer 2

因为这篇SO帖子出现在我的谷歌搜索中，我想我应该提到.live从1.9开始已被弃用，推荐的方法现在是.on

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

Answer 3

如果我理解正确，问题在于事件不能与动态创建的select元素一起使用。

如果是这样，解决方案很简单......试试这个：

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

更新：对于较新版本的jQuery，您必须使用on()而不是live()。

Answer 4

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

要编写一小段简单，有效的代码并处理新元素，您可以在文档上使用.on：

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

Answer 5

尝试使用.live而不是使用绑定。你需要最新版本的jQuery才能做到这一点。

Answer 6

来自jQuery API：

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。旧版jQuery的用户应该使用.delegate（）而不是.live（）。

因此，如果您使用1.7之前的jQuery版本，则应使用.delegate（）。

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

如何在jQuery中成功绑定事件

6 个答案: