无法使用 jQuery 在动态创建的元素上调用事件答案

【问题标题】：Cant call event on dynamically created elements using jQuery无法使用 jQuery 在动态创建的元素上调用事件
【发布时间】：2015-09-24 12:06:34
【问题描述】：

我正在创建一行元素，在我的 ROW 中有一个选择框/下拉菜单。我想要的是我想在每一行的每个下拉菜单上调用 onChange 函数。

count = 1;
jQuery('select[id="warehouse-' + count + '"]').change(function() {
    alert('hello');
    var urlWareHouse = "<?php echo $this->url('stock', array('action' => 'populateLocationInWarehouse', 'controller' => 'Stock')) ?>";
    url = urlWareHouse + '/' + jQuery('id="warehouse-' + count + '"]').val();
    SelectBoxNullValue = "Select Location";
    populateSelectBox(url, 'warehouse-'+count, 'location');
    count++;
});

我的 populateSelectBox 函数只是一个将数据填充到新创建的选择元素的 ajax 调用。我不知道我做错了什么。问题是我无法在新创建的 Approach 上触发 onChange。

【问题讨论】：

您查看过 API 中的.on() 方法吗？这曾经通过 .live() 完成，但后来被弃用了。

标签： jquery dynamic-data

【解决方案1】：

使用on() 函数绑定到元素，甚至是新元素，否则你必须不断地重新绑定元素。

jQuery(document).on("change",'select[id="warehouse-' + count + '"]',function() {
    alert('hello');
    var urlWareHouse = "<?php echo $this->url('stock', array('action' => 'populateLocationInWarehouse', 'controller' => 'Stock')) ?>";
    url = urlWareHouse + '/' + jQuery('id="warehouse-' + count + '"]').val();
    SelectBoxNullValue = "Select Location";
    populateSelectBox(url, 'warehouse-'+count, 'location');
    count++;
});

【讨论】：

我有一个小问题。此代码仅对第一行有帮助。我的意思是事件仅与第一次发生的呼叫有关，而不是与任何其他事件有关。您能说出为什么会这样吗？
@noobie-php 您的选择器可能不正确，看起来您的 id 有仓库- 然后是一些数字，我假设数字以某种方式增加，尝试使用 'select[id^=warehouse-]' 它将选择任何 ID 以 warehouse- 开头的选择框

【解决方案2】：

使用.on()，而不是.change()。

.change 只绑定一次。如果添加了元素，则需要重新绑定。 .on 会自动执行此操作。

此外，由于您有一个 ID，因此您无需将“select”指定为选择器的一部分。

jQuery('#warehouse-' + count) 可以。

【讨论】：

感谢回复，只是您提到的一个 qucik 问题， .change() 仅绑定 1 次。我可以将它用于第一个事件，我的意思是一直使用它，根本不要使用 onChange
让我重新表述：它会永久绑定（每次点击），但如果使用 JavaScript 从 DOM 中添加/删除元素则不会。
您是指调用该元素的那个元素（可以说是父元素），还是所有元素？我的意思是使用 JS 添加到 DOM 的所有元素
我不确定你的意思。
@moobie-php 绑定适用于与您的选择器匹配的所有匹配元素，但前提是它们当前位于 DOM 中，因此您必须使用 on，它会将事件绑定到新的元素，但前提是它们与选择器匹配。