如何检查动态生成的复选框何时被选中?

时间:2016-12-20 20:56:42

标签: jquery

我有一个表,其中包含在用户导入文件后生成的复选框。复选框是动态生成的。

    $("input[name='child_user_id_fk[]']").change(function(){
        alert("test");
        $(this).closest("tr").toggleClass("checked", this.checked);
    });

这将适用于生成页面时作为页面一部分的任何复选框,但不适用于使用JQuery生成的复选框。我怎样才能使这个工作?

4 个答案:

答案 0 :(得分:1)

您需要使用.on()方法。这会将任何事件附加到动态创建的元素。

$(document).on('change',"input[name='child_user_id_fk[]']",function(){
    alert("test");
    $(this).closest("tr").toggleClass("checked", this.checked);
});

答案 1 :(得分:1)

您遇到的问题是,当您连接活动时,您的输入不在页面上。结果,它不起作用。

如您所述,解决问题的一种方法是使用livelive的作用是向文档正文本身添加一个事件处理程序。然后,当您输入的任何事件"起泡"到body事件处理程序,它处理它。这样,即使添加事件处理程序时页面上没有输入,它仍然有效(因为页面上的 主体。)

但是存在问题:正如其他人所指出的那样,$("input[name='child_user_id_fk[]']").change(function(){ alert("test"); $(this).closest("tr").toggleClass("checked", this.checked); }); 已被弃用。原因很简单:如果你使用$('body').append('<input name="child_user_id_fk[]" />'); $("input[name='child_user_id_fk[]']").change(function(){ alert("test"); $(this).closest("tr").toggleClass("checked", this.checked); }); 很多(甚至是中等数量),它可能会导致巨大的性能问题,因为页面上的每个事件都必须通过你放在身体上的每个事件处理程序。

解决方案不是使用直播,而是不要做你现在正在做的事情。相反,您只想挂钩您的事件处理程序:

$('body').append('<input name="child_user_id_fk[]" />')
         .change(function(){
             alert("test");
             $(this).closest("tr").toggleClass("checked", this.checked);
         });

将输入添加到页面后。例如:

change

或者用链接来简化它:

append

只要您将事件处理程序连接到DOM中的元素(即,只要在执行html之后执行on,或{{ 1}},或者你添加元素,它会起作用。

修改

如评论中所述,您也可以使用on。但是,on还需要元素位于页面上,除非on的目标是正文本身(在这种情况下,您基本上只使用live做与{{1}})相同的事情。

答案 2 :(得分:0)

通过将['{},'.format(i).strip() for i in WordString.split(',') if i] 更改为>>> WordString = 'word one, word-two, word3,' >>> >>> ['{},'.format(i).strip() for i in WordString.split(',') if i] ['word one,', 'word-two,', 'word3,'] ,我发现代码正在运行。

答案 3 :(得分:0)

我建议通过迭代.google-visualization-table-page-number { font-size: 16px !important; } 为新创建的复选框提供新ID,并为其提供n类。 假设你有一个功能

checks

现在您使用这样的代码。您获得了ID并调用该复选框来执行您的功能。

function createNewBox()
{
    //code that create new boxes with new ids
}