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

新的用户

在html标记中,我有一个简单的select options标记。使用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吗?任何帮助和建议将是非常可观的。谢谢

米林德·安纳特瓦尔(Milind Anantwar)

您需要使用事件委托将事件附加到动态添加的元素上:

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

工作演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

从无法在IE中运行的克隆选择选项中删除“选定”属性

来自分类Dev

克隆后无法从选择框中选择选项

来自分类Dev

克隆后无法从选择框中选择选项

来自分类Dev

使用Javscript在克隆节点中获取动态选择选项

来自分类Dev

获取php填充选择选项的ID

来自分类Dev

jQuery $ .change函数不适用于克隆选择

来自分类Dev

jQuery UI的克隆选择菜单不起作用

来自分类Dev

获取选择选项数据的问题

来自分类Dev

jQuery获取选择选项的名称

来自分类Dev

jQuery选择选项

来自分类Dev

从下拉列表中获取已选择选项的行ID-jQuery

来自分类Dev

AngularJS,从服务器获取对象后选择选项

来自分类Dev

在同一页面中克隆选择框选项值

来自分类Dev

使用 jQuery 将数据库中的选择选项填充到动态选择选项

来自分类Dev

Razor MVC获取SQL语句的选择选项ID

来自分类Dev

反应,在选择选项上获取数据属性

来自分类Dev

如何从选择选项获取数据到PHP?

来自分类Dev

在数据列表中获取类选择选项

来自分类Dev

从物化选择选项中获取数据图标值

来自分类Dev

如何使用NodeJS获取MongoDB数据以选择选项

来自分类Dev

Jquery 在 select 中的所有选项上模拟单击事件以从多个选择选项中获取数据

来自分类Dev

在jQuery选定插件中获取取消选择选项的价值

来自分类Dev

在javascript / jquery中获取选择选项菜单

来自分类Dev

jQuery通过TR循环并获取子级选择选项

来自分类Dev

使用 prop() 按值获取 jQuery 选择选项

来自分类Dev

jQuery更新选择选项

来自分类Dev

jQuery随机选择选项

来自分类Dev

选择选项值jquery

来自分类Dev

通过Ajax成功在动态克隆的选择选项中填充数据

Related 相关文章

热门标签

归档