Question

在html标记中，我有一个简单的选择选项标记。使用jQuery我得到数据ID改变选项，它工作正常。但我也有克隆选择选项的按钮。使用克隆元素通过执行更改时的警报数据ID不起作用。这是我的标记和js代码

Html代码

<table>
        <tr class="resource-data">
            <td>
                <select name="product" class="product-name">
                    <option value="apple" data-id="apple">Apple</option>
                    <option value="bus" data-id="bus">Bus</option>
                    <option value="car" data-id="car">Car</option>
                    <option value="duster" data-id="duster">Duster</option>
                </select>
            </td>
        </tr>
    </table>
    <button type="button" class="btn btn-success pull-right add-new-data"> Add </button>

JS代码

<script type="text/javascript">
    jQuery(document).ready(function(){
        var FirstRow = jQuery("table tr.resource-data:first").clone();
        jQuery('body').on('click','.add-new-data', function() {
            var ParentRow = jQuery("table tr.resource-data").last();
            FirstRow.clone().insertAfter(ParentRow);
        });

    jQuery('select.product-name').on('change', function(e) {
        id = $(this).find("option:selected").data('id');
        alert(id);
    });
    });
    </script>

这也是Fiddle链接。那么有人可以告诉我如何提醒克隆的数据ID吗？任何帮助和建议都会非常明显。谢谢

Answer 1

您需要使用 event delegation 将事件附加到动态添加的元素：

jQuery('body').on('change','select.product-name', function(e) {
    id = $(this).find("option:selected").data('id');
    alert(id);
});

<强> Working Demo

Answer 2

仅为了您的信息，您还可以使用.clone(true)，true也会复制事件处理程序。

以下是修改/更新的代码。

jQuery(document).ready(function () {

    jQuery('select.product-name').on('change', function (e) {
        id = $(this).find("option:selected").data('id');
        alert(id);
    });

    var FirstRow = jQuery("table tr.resource-data:first").clone(true);
    jQuery('body').on('click', '.add-new-data', function () {
        var ParentRow = jQuery("table tr.resource-data").last();
        FirstRow.insertAfter(ParentRow);
    });

});

<强> FIDDLE

jQuery在克隆选择选项后获取数据ID

2 个答案: