jQuery选择JavaScript生成的元素

jQuery select JavaScript generated elements

本文关键字：元素 选择 JavaScript jQuery      更新时间：2023-09-26

我正在使用JavaScript动态生成一些HTML表。填写完这个动态表后，我使用jQuery来"获取"一些输入，并为表单验证做一些小计算。但是，我的jQuery选择器不适用于动态HTML表单。有人能给我一些建议吗？谢谢

这是代码：

<script>
//generate HTML table
$('<tr><th><label for="id_CAM_1">Input:</label></th><td><select name="CAM_1_'+i+'" id="id_1_'+i+'"><option value="1">Option 1</option><option value="2">Option 2</option></select></td></tr>').appendTo('.table');
// jQuery selector, which does not work dynamically
$('select[name=CAM_1_'+i+']').change(function() {
            var ss1=$(this).val()
            alert(ss1)})
</script>

以下将检测tableSelector 中名称以CAM_1_开头的所有select元素的所有更改

$('tableSelector').on('change', 'select[name^="CAM_1_"]', function() {
    alert(this.value);
});

我想复制你的问题，但对我来说，它完全可以。我确实添加了结束括号（})），因为这些似乎在你发布的内容中丢失了。控制台里有错误吗。检查JavaScript控制台中是否有任何错误，以及是否使用了最新版本的jQuery。

<table class="table"></table>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
i = 0;
//generate HTML table
$('<tr><th><label for="id_CAM_1">Input:</label></th><td><select name="CAM_1_'+i+'" id="id_1_'+i+'"><option value="1">Option 1</option><option value="2">Option 2</option></select></td></tr>').appendTo('.table');
// jQuery selector, which does not work dynamically
$('select[name=CAM_1_'+i+']').change(function() {
    var ss1=$(this).val()
    alert(ss1)
});
</script>

<script type="text/javascript">
    $(function() {
        $('<tr><th><label for="id_CAM_1">Input:</label></th><td><select name="CAM_1_'+i+'" id="id_1_'+i+'"><option value="1">Option 1</option><option value="2">Option 2</option></select></td></tr>')
            .appendTo('.table')
            .on('change', function() {
                alert(this.value);
        });
    });
</script>​​​​​​​​​​​​​​​

<script>
//generate HTML table
$('<tr><th><label for="id_CAM_1">Input:</label></th><td><select name="CAM_1_'+i+'"   id="id_1_'+i+'"><option value="1">Option 1</option><option value="2">Option 2</option></select></td></tr>').appendTo('.table');
// jQuery selector, which does not work dynamically
$('select[name=CAM_1_'+i+']').live("change",function() {
        var ss1=$(this).val()
        alert(ss1)})
</script>

因此，基本上您需要使用jquery的live方法来动态生成html。

相关文章：