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生成的元素

回答

相關問題