JQuery函数只能在函数中使用

我有一个带有下拉列表的页面和ADD NEW中的一个选项。 为它创建的function非常有用。

$('#town_id').on('change', function(){ if($(this).val() == "ADD_NEW"){ console.log('Add New'); $('#town_id').val(''); $('#town_id').trigger('chosen:updated'); $('#modal-1').modal('show'); } }); 

问题是有时候选择框根本不在页面上，我会用jquery将它附加到页面中。 这个部分也可以工作，但是在运行上面的代码时，从jquery添加的ADD NEW不会被拾取。 如果我将上面的代码放在添加选择代码下面，然后在下拉列表中选择ADD NEW，它就可以了。

 // remove towns text $('.towns').html('</select'); $("#town_id").chosen({disable_search_threshold: 15}); $("#town_id").css('width', '100%'); // add chosen select $('#town_id').append('' + result.name + ''); $('#town_id').append('Add new town...'); $('#town_id').trigger('chosen:updated'); 

有没有办法让它工作而不重复选择代码？

Answer 1

是的，有一个解决方案。 您必须使用委托，因为HTML元素是动态创建的。

考虑.towns元素选择框的容器和#town_id选择框，语法如下所示：

 $('.towns').on('change', '#town_id', function(){ if($(this).val() == "ADD_NEW"){ console.log('Add New'); $('#town_id').val(''); $('#town_id').trigger('chosen:updated'); $('#modal-1').modal('show'); } }); 

是的，这适用于静态和动态选择框。

---

直接和委派活动

提供selector ，事件处理程序称为委托 。 当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素） 。 […]

事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用.on() 。

阅读更多