Question

动态添加的元素的jQuery选择器似乎不起作用。简而言之，我有一组带有函数的复选框。 PHP为要添加的每行数据创建一个add（..）条目（在本例中为文件名，注释和复选框以将其删除）。这些是使用硬编码模板添加的，这很好。我不会发布添加脚本，但会生成类似的条目（为简洁而修改）......

<tr>
  <td class="cell-file"><a href="...">afile.jpg</a></td>
  <td class="cell-comment">A comment</td>
  <td class="cell-remove a-center last"><input type="checkbox" id="...is_delete" name="...is_delete" value="1" class="removable"></td>
</tr>

在另一个复选框的状态更改时，我需要设置所有动态添加的复选框以选中（并禁用按钮），具有以下内容...

function setAddButton(arg){
if(arg){
    $('add-attachment').addClassName('disabled');
    Event.stopObserving('add-attachment', 'click');
    // Check all removable checkboxes
    $('input.removable:checkbox').attr('checked', true);
}else{
    $('add-attachment').removeClassName('disabled');
    Event.observe('add-attachment', 'click', orderAttachment.add.bind(orderAttachment));
}
}

问题是选择器$('input.removable:checkbox')返回null。我尝试了各种形式的选择器，包括$('.removable:checkbox')＆amp; $('input:checkbox.removable')但未选择任何内容。

各种帖子都说这个选择器应该有效，但事实并非如此。所以我假设这是因为jQuery无法“看到”动态添加的元素。我已经阅读了有关使用.live（）或.on（）的各种帖子，但这是关于为动态添加元素添加事件处理程序。我不想要一个事件处理程序，我只是想能够选择并设置动态添加的复选框的checked属性。

有什么想法吗？

Answer 1

要勾选复选框，您可以使用prop代替attr 属性prop用于jquery.1.6 +如果您使用的是劣质版本，则必须使用attr 试试这个：

$('input.removable:checkbox').prop('checked', true);

Answer 2

使用checked代替true中的attr，

//checked in place of true
$('input.removable:checkbox').attr('checked', 'checked');

您可以使用prop之类的

$('input.removable:checkbox').prop('checked', true);

Answer 3

您的jquery版本＆gt; 1.6 请参阅here

$('input.removable:checkbox').prop('checked', true);

你的jquery版本＆lt; = 1.6

$('input.removable:checkbox').attr('checked', true);

或者您可以使用

$('input.removable:checkbox').attr('checked', "checked");

Answer 4

好的，所以这个网站的问题是Magento的第三方主题和我正在修改的第三方扩展。该网站使用Prototype和jQuery。 [我认为Prototype是jQuery的超集，但似乎不是！]这是Protptype，它添加了动态复选框，标准jQuery选择器不适用于这些。

在这种情况下，虽然$('add-attachment').addClassName('disabled');有效，但$('input.removable:checkbox')却没有。 Prototype的正确（或至少一种工作）语法是：

$$('input[class="removable"]').each(function(element) {
    element.checked = true;
});

我创建了一个简单的测试来计算发生的事情，如果有帮助的话，下面会介绍。我想要的另一件事是，如果选中“控制”复选框，同时仍然显示并发布状态，则阻止取消选中删除复选框。解决方案很简单但很难实现 - 单独使用Prototype时与jQuery一起使用时效果不佳。这个解决方案只适用于Prototype，也适用于jQuery。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
  </head>

  <body>
    <div id="checkboxes">
      <div id="cbcontrol">
        <input type="checkbox" id="cb1" name="cb1" onclick="forceIt(this.checked)"/>
        <label for="cb1">Check this to force-check the others</label>
      </div>
      <div id="cbhard">
        <input type="checkbox" id="cb2" name="cb2" class="cb" onclick="fixIt(this)"/>
        <label for="cb2">Checkbox hard coded</label>
      </div>
      <div id="cb-template" style="display:none">
        <input type="checkbox" id="#id#" name="#name#" class="cb" onclick="fixIt(this)"/>
        <label for="#id#">Checkbox dynamic</label>
      </div>        
    </div>

    <script type="text/javascript">
       // Add a checkbox dynamically using the template
       var cbtemplate = $('cb-template').innerHTML;
       var templateSyntax = /(^|.|\r|\n)(#(\w+)#)/;
       var template = new Template(cbtemplate, templateSyntax);
       data = {};
       data.id  = 'cb2';
       data.name  = 'name';
       Element.insert('cb-template', {'before':template.evaluate(data)});

       // Force checkbox states
       function forceIt(state) {    
         $$('input[class="cb"]').each(function(cb) { cb.checked = state; });
       }

       // Keep checkboxes checked
       function fixIt(cb) {
         if ($('cb1').checked) {
           cb.checked=!cb.checked;
         }
       }
     </script>
   </body>
 </html>

在文档加载后通过jQuery添加的元素上的jQuery选择器

4 个答案: