Question

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标记中获取选项值。通常下面的代码工作正常。但是当我使用上面的代码添加新的select标签时，onchange功能无法正常工作。

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

Answer 1

尝试这样做：您需要使用.on()委托事件来绑定动态生成元素的更改事件

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

Answer 2

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

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

委派事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

即

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

实施例

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

Onchange函数在Jquery中不起作用

2 个答案: