動態創建複選框時未觸發動作

當我創建了一個HTML複選框時，該動作正常觸發，但是當我使用javascript創建複選框時出現問題（當我在表格中添加一行按鈕並單擊新複選框時）行動不起作用。動態創建複選框時未觸發動作

這是我的代碼：

<HTML> 
<HEAD> 

<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<SCRIPT> 


    $(window).load(function() { 

     $('input[name=chk]').change(function() { 
      if ($('input[name=chk]').is(':checked')) { 
       alert("checked"); 
       } 
      else { 
       alert("unchecked"); 
      } 
     }); 
    }); 

    function addRow(tableID) { 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var cell1 = row.insertCell(0); 
     var element1 = document.createElement("input"); 
     element1.type = "checkbox"; 
     element1.setAttribute("name","chk"); 
     cell1.appendChild(element1); 

     var cell2 = row.insertCell(1); 
     cell2.innerHTML = rowCount + 1; 

     var cell3 = row.insertCell(2); 
     var element2 = document.createElement("input"); 
     element2.type = "text"; 
     cell3.appendChild(element2); 
    } 


</SCRIPT> 
</HEAD> 
<BODY> 

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 

<TABLE id="dataTable" width="350px" border="1"> 
    <TR> 
     <TD><INPUT type="checkbox" name="chk"/></TD> 
     <TD> 1 </TD> 
     <TD> <INPUT type="text" /> </TD> 
    </TR> 
</TABLE> 

</BODY> 
</HTML>

謝謝

來源

2012-09-26 Mils

假設你正在使用jQuery，爲什麼不使用jQuery做動態元素創造？應該比簡單的JS方法更簡單。 – nnnnnn

謝謝！我會嘗試。 – Mils

對不起，我有一個問題：爲什麼當我這樣做：爲（在TEMP_DATA VAR變量）{ $（ '＃的dataTable'）上（ '改變'， '輸入[名稱=' +變量+]」，函數（）{...}）; } 這不起作用 – Mils

這是因爲你的事件處理er：

$('input[name=chk]').change(function() { ... });

...僅適用於那些匹配選擇器的輸入 - 在動態創建的輸入存在之前。您可以改用在事件發生時檢查選擇附加到一個父元素委派的事件處理程序（或文件）：

$('#dataTable').on('change', 'input[name=chk]', function() { ... });

的.on() method在1.7版本中加入，因此，如果您'使用舊版本的jQuery替代使用.delegate()。（除非您使用的是真的舊版本，預1.4.2，在這種情況下，你將不得不使用.live()）

來源

2012-09-26 13:25:04 nnnnnn

你應該使用on()方法來代替，只要你是使用jQuery 1.7或以上

見工作fiddle

$('#dataTable').on('click','input:checkbox',function() { 
     if ($('input[name=chk]').is(':checked')) { 
      alert("checked"); 
      } 
     else { 
      alert("unchecked"); 
     } 
    });

來源

2012-09-26 13:23:55 hsalama

這裏的問題是，找你試圖附加一個事件偵聽器（在.change()）添加到DOM中尚不存在的元素。您應該在創建chackbox後綁定偵聽器。

來源

2012-09-26 13:25:22 alexandernst

對於動態生成的元素，事件應該從元素或文檔對象的靜態父項中的一個委派，您可以使用on方法。

$('#dataTable').on('click', 'input[name=chk]', function(){ 
    // ... 
})

來源

2012-09-26 13:25:32 undefined

您需要設置一個.live處理程序的複選框。另外，在處理程序中，您可以使用$（this）來獲取當前複選框。

給你：http://jsfiddle.net/edAv8/

或者你可以使用。對處理程序：http://jsfiddle.net/edAv8/1/

來源

2012-09-26 13:27:51

動態創建複選框時未觸發動作

回答

相關問題