jquery - Onchange函数在Jquery中不起作用

This question already has answers here:

Event binding on dynamically created elements?

（23个答案）


4年前关闭。




Onchange函数在Jquery中不起作用。

在我的页面中，当我单击添加按钮时，我需要添加选择标签。

我的代码在这里

使用下面的代码添加新的选择标签。这段代码工作正常。

var counter =1;
var newrow = $(document.createElement('tr')).attr("id", 'newgroup' + counter);
var httttm = "";
httttm += "<td><select name='input_field[]' class='form-control' ><option value=''>Select</option><option value='input'>Text</option><option value='option'>Option</option></select></td></td>";
newrow.after().html(httttm);
newrow.appendTo("#newgroup");
counter++;

以下代码用于从select标签获取选项值。通常下面的代码可以正常工作。但是当我使用上面的代码添加新的选择标记时，onchange函数不起作用。

 $('select').change(function (){
    var selvalue = $(this).val();
    if(selvalue == "option")    {
        alert("hai");
    }
 });

最佳答案

当前，您正在使用直接事件绑定，事件处理程序仅绑定到当前选定的元素；它们必须在您的代码进行事件绑定调用时在页面上存在。

动态创建元素时，请使用Event Delegation委托事件方法使用.on()。


委托事件的优点是，它们可以处理以后在后代添加到文档中的后代元素中的事件。


即

$(staticParentElement).on('event','selector',callback_function)

例

$('#newgroup').on('change', "select", function(){
    var selvalue = $(this).val();
    if(selvalue == "option")    {
        alert("hai");
    }
});