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

动态添加的元素的jQuery选择器似乎不起作用。简而言之，我有一组添加了函数的复选框。 PHP为要添加的每一行数据创建一个添加（..）条目（在这种情况下，文件名，注释和复选框将其删除）。这些都是使用硬编码模板添加的，并且工作正常。我不会发布添加脚本，但它会产生类似的条目（修订为简洁起见）...在文档加载后通过jQuery添加的元素上的jQuery选择器

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

问题是，选择器回来为空。我已经尝试过这种选择器的各种形式，包括$('.removable:checkbox') & $('input:checkbox.removable')但是没有选择。

各种职位说这个选择器应该工作，但它不。所以我假设这是因为jQuery不能'看到'动态添加的元素。我已阅读使用.live（）或.on（）的各种帖子，但这是关于添加事件处理程序以动态添加元素。我不想要一个事件处理程序，我只希望能够选择并设置动态添加的复选框的checked属性。

任何想法？

来源

2013-08-20 Adam Lavery

尝试'$（ 'input.removable：复选框'）丙（ '检查'，真）;' –

另外，还要确保你添加独特的ID为复选框。 –

谢谢，但问题是没有检查框，它选择它！正如我所说，选择器返回null。一旦我可以选择它，我可以检查它。是的，每个复选框都有一个唯一的ID和名称。为了简洁起见，我刚刚缩短了HTML。 –

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

在这种情况下，虽然$('add-attachment').addClassName('disabled');工作，没有。正确的（或至少一个工作）语法原型是：

$$('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>

来源

2013-08-20 16:54:33

检查您可以使用prop代替attr
财产prop复选框是jquery.1.6 +如果您使用的是劣质的版本，你必须使用attr 试试这个：

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

来源

2013-08-20 10:53:33

谢谢，但问题是不检查框，它选择它！正如我所说，选择器返回null。一旦我可以选择它，我可以检查它。 –

使用checked中的attr像true传动单元连接，

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

您可以使用prop像

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

来源

2013-08-20 10:57:59

谢谢，但问题是不检查框，它选择它！正如我所说，选择器返回null。一旦我可以选择它，我可以检查它。 –

您的jQuery版本> 1.6看到here

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

您的jQuery版本< = 1.6

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

，或者您可以使用

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

来源

2013-08-20 11:14:39

谢谢，但问题是不检查框，它选择它！正如我所说，选择器返回null。一旦我可以选择它，我可以检查它。 –

@AdamLavery看到jsfiddle它工作正常与ur $（'input.removable：checkbox'），当我警报（$（'input.removable：checkbox'））;我得到的对象是正确的 –

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

回答

相关问题