向javascript中生成的动态控件添加属性

adding attribute to dynamic controls generated in javascript

本文关键字：动态控件 添加 属性 javascript      更新时间：2023-09-26

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

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

试试我：

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

简单演示FIDDLE

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

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

这将把您的事件附加到CCD_ 3元素内的任何CCD_，减少了必须检查整个CCD_ 4元素树的范围并提高了效率。

一个简单的工作FIDDLE演示

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

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

<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');
}

对于可以在上使用的动态生成内容

$("form").on("change", function(event) {
  alert('Checkbox click!');
});
相关文章：