javascript - 将属性添加到在 javascript 中生成的动态控件

Question

我有一个用 javascript 创建的表。在每一行上，我都添加了一个复选框。在选中复选框时，必须显示警告消息。如何将 oncheck 属性添加到 javascript 中的动态复选框。

var tblRow = "<tr><td Style='display: none'>" + data.IxDetails
        "</td><td>" + data.Name +
             "</td><td>" + GroupTable +
              "</td><td>" + (data.AllowFileAttachment == true ? "Yes" :"No" )  +
        "</td><td>" + (data.SetToInActive == true ? "INACTIVE" : "ACTIVE" ) +
              "</td><td><input type = 'checkbox' id='" +
       data.Index + "' name='selectedData'  value='123' "+
        "</td><td><input type = 'checkbox' id='dl" +
       data.Index + "' name='selectedData'  value='123' >" +
        "</td></tr>";
        $('#DataTable> tbody:last').append(tblRow);

Answer 1

试试我：

 $('table tr').find('input:checkbox').on('click', function(){
         alert("I'm clicked!");
 });    

最简单的演示小提琴

Answer 2

由于checkbox是动态添加的，因此您需要使用事件委托来注册事件处理程序。

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#DataTable').on('click', ':checkbox', function(event) {
    event.preventDefault();
    alert('testlink'); 
});

这会将您的事件附加到元素checkbox内的任何#DataTable内容，从而减少检查整个document元素树的范围并提高效率。

一个简单的工作小提琴演示

Answer 3

var tblRow = "<tr><td Style='display: none'>" + data.IxDetails
        "</td><td>" + data.Name +
             "</td><td>" + GroupTable +
              "</td><td>" + (data.AllowFileAttachment == true ? "Yes" :"No" )  +
        "</td><td>" + (data.SetToInActive == true ? "INACTIVE" : "ACTIVE" ) +
              "</td><td><input type = 'checkbox' onchange='yourfunction()' id='" +
       data.Index + "' name='selectedData'  value='123' "+
        "</td><td><input type = 'checkbox' onchange='yourfunction()' id='dl" +
       data.Index + "' name='selectedData'  value='123' >" +
        "</td></tr>";
        $('#DataTable> tbody:last').append(tblRow);

Answer 4

用于动态添加的控件更好地使用

<input type = 'checkbox' id='dl" +
       data.Index + "' name='selectedData' href="javascript:void(0);" onclick="dynaclick('id1')"  value='123' >

和javascript函数是

function dynaclick(id){
alert('checkbox with'+id+' is clicked');

}

Answer 5

对于动态生成的内容，您可以使用

$("form").on("change", function(event) {
  alert('Checkbox click!');
});