触发动态数据的“点击”事件答案

【问题标题】：Trigger 'click' event for dynamic data触发动态数据的“点击”事件
【发布时间】：2025-12-21 14:20:17
【问题描述】：

我有一系列从 .csv 文件读取时动态创建的复选框。在制作了一系列复选框后，添加了另一个复选框，即“全选”。这个想法是“全选”复选框，它也是动态创建的，当被选中时，将选中它上面的所有复选框。每个复选框都设置为将其名称属性放在下面的文本区域中。

这是从 csv 文件中提取 HTML 后的示例。

<div class="checkboxes">
   <input type="checkbox" class="article" name="Article 1" />Article 1 <br>
   <input type="checkbox" class="article" name="Article 2" />Article 2 <br>
   <input type="checkbox" class="select-all" name="select-all" />Select all
</div>
<textarea></textarea>

现在我在文章复选框上使用 .delegate 并全选来注册点击事件

 //clicking dynamically created input.article
 $('div.checkboxes').delegate('input.article','click',function(){
     $('textarea').val($(this).attr('name') + '/n');  //adds 'name' attr and a linebreak
 });

 //clicking dynamically created select-all
 $('div.checkboxes').delegate('input.select-all','click',function(){
     $('div.checkboxes').find('input.article').prop('checked',true); //works to select all articles
 });

问题是，即使“全选”确实检查了所有文章复选框，它实际上并没有触发该行：

    $('textarea').val($(this).attr('name') + '/n');  //adds 'name' attr and a linebrea

name 属性没有放在 textarea 中。

同样，所有文章复选框都被“全选”选中。它只是“触发”一个“点击”事件。

在 textarea 中，理想情况下会显示：

第 1 条

第二条

如何做到这一点？

感谢您的帮助。

已解决：

  $('div.checkboxes').delegate('input.select-all','click',function(){

       if ($(this).is(':checked')){

      $('input.article[type=checkbox]').prop('checked',true);   
      $('input.article[type=checkbox]').each( function(){
        $(this).trigger('click');
      });
       }
  });

维伦丹克。

【问题讨论】：

点击“全选”后，<textarea/> 中应该显示什么？
第 1 条第 2 条我将在原始问题中添加此内容。谢谢。
@Mr.Loop - 请注意：“从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。”见api.jquery.com/delegate

标签： jquery triggers delegates

【解决方案1】：

有很多方法可以做这些事情，但这里是对您的代码的简单更改：

 //clicking dynamically created input.article
 $('div.checkboxes').delegate('input.article','click',addname);

function addname(){
     $('textarea').val($(this).attr('name') + '/n');  //adds 'name' attr and a linebreak
};

 //clicking dynamically created select-all
 $('div.checkboxes').delegate('input.select-all','click',function(){
     $('div.checkboxes').find('input.article').prop('checked',true); //works to select all articles
     addname();
 });

注意 - 我注意到您似乎遗漏了很多 ;s，这是复制错字还是您的代码中遗漏了它们？

【讨论】：