Question

我正在创建一个元素行，在我的行中我有一个选择框/下拉列表。我想要的是我想在每一行的Drop Down上调用 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调用，它将数据填充到新创建的Select Element。我不知道我做错了什么。问题是我无法通过我的方法触发 onChange 。

Answer 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++;
});

Answer 2

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

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

此外，由于您有一个ID，因此您无需在选择器中指定“选择”。

jQuery('#warehouse-' + count)会这样做。

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

2 个答案: