jQuery选择JavaScript生成的元素

我正在使用JavaScript来即时生成一些HTML表格。在填写完这个动态表之后，我使用jQuery来“抓取”一些输入，并为表单验证做一些小计算。不过，我的jQuery选择器不支持动态HTML表单。任何人都可以给我一些建议吗？谢谢！jQuery选择JavaScript生成的元素

下面是代码：

<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>

来源

2012-08-28 tao.hong

通过将选择器传递给['on']（http://api.jquery.com/on）方法来使用事件委托。它比试图管理绑定和重新绑定事件更有弹性。 – zzzzBov

你的代码是否真的缺少'}）'？否则它应该工作http://jsfiddle.net/mowglisanu/JKRGs/ – Musa

我几乎每天都会看到2-3个问题。 [很多]（http://stackoverflow.com/search?q=dynamically+created+elements），我甚至不能回答。 :( –

下会检测到有与CAM_1_在tableSelector

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

来源

2012-08-28 16:43:58 Neal

感谢您的帮助尼尔！ –

我猜* *选择开始是真正的问题然后，呃？:) –

你是在其他地方的bug顶部抹灰。最初发布的代码工作正常（当您添加右括号时）。这大概是因为我在实际代码中重复使用了一次。 – ForbesLindesay

<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>

来源

2012-08-28 16:42:57 adeneo

ummmm没有....... – Neal

尼斯忍者编辑.... – Neal

我想开始一个名称的所有select元素的所有变化复制你的问题，但对我来说，它工作得很好。我确实必须添加右括号（})），因为这些内容似乎缺少您发布的内容。你在控制台中是否有任何错误？检查您是否在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>

来源

2012-08-28 16:48:58 ForbesLindesay

我忘了在帖子中添加}）。谢谢！ –

这是否解决了您的问题？ – ForbesLindesay

它正在工作。再次感谢！ –

<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的活法动态生成的html。

来源

2012-08-28 16:57:39

jQuery选择JavaScript生成的元素

回答

相关问题