Question

我有一个创建2个选择列表的按钮。

$(document).ready(function(){
$("input[name$='addcriteria']").on('click', function() {
     var newrow =  $("<p>Where <select name='fieldname' class='fieldname'></select>         
     is <select name='paperSession' class='options'></select></p>");

     //--Some other codes that declares the option values of the select field--//

     });
}); //End of Document ready

接下来，我想检测选择列表时创建的操作。

    $(".fieldname").on('change',function(){ 
        alert("testing");
    });

问题是：我应该将此行动放在$document).ready(function(){下吗？

Answer 1

嗯，如果你在$(document).ready(function(){})中编写函数，那将是一种很好的做法：

当您使用.on()

动态添加新行时尝试事件委派

  $(document).on('change','.fieldname',function(){ 
        alert("testing");
  });

或

$(document.body).on('change','.fieldname',function(){ alert("testing"); });

此处document / document.body是指最接近的父元素

Answer 2

尝试：

$(document).on("change",".fieldname",function(){ 
    alert("testing");
});

Answer 3

我是否应该将此操作放在$（document）.ready（function（）{下？

是的，您需要将其放在$(document).ready()内。此外，由于select元素是动态添加的，因此您需要使用event delegation来注册事件处理程序，如：

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('change', '.fieldname', function() {
    alert("testing");
});

如何检测选择列表中的更改？

3 个答案: