将 jQuery 重新应用于克隆的对象
re-applying jquery to cloned objects
将jquery重新应用于克隆对象的正确方法是什么?
我这里有一个我在jsfiddle中安装的例子:http://jsfiddle.net/49o6arLu/16/
<div class="hidden element-holder">
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
</div>
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
<div class="clear"></div>
<div class="add-element">Add Element</div>
$('div.button').click(function(event) {
if($(this).parent().children('.green-square').is(':visible')) {
$(this).parent().children('.green-square').hide();
}else{
$(this).parent().children('.green-square').show();
}
});
$('div.add-element').click(function(event) {
$('div.element-holder').children('div').clone().insertAfter($('div.element-holder'));
});
如您所见,初始显示的框和按钮工作正常。但是,当您添加另一个元素时,新元素按钮不再起作用。
我理解为什么我有这个问题,但是我不知道我应该以正确的方式将 Jquery 重新应用于克隆的新元素。
有人可以为jquery提供解决方案并就您的所作所为提供一些解释吗?
谢谢!
通过在公共父元素上使用单个委派单击处理程序,可以省去将处理程序重新应用于所有追加元素的需要。
首先修改您的 HTML 以包含容器,在本例中#element-container
:
<div class="hidden element-holder">
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
</div>
<div id="element-container">
<div class="element">
<div class="button">Button</div>
<div class="green-square"></div>
</div>
<div class="clear"></div>
</div>
<div class="add-element">Add Element</div>
然后,您可以修改Add Element
按钮以追加到该容器:
$('div.add-element').click(function (event) {
$('div.element-holder').children('div').clone().appendTo('#element-container');
});
最后,您可以将委派的事件处理程序添加到新#element-container
中。请注意,我还使用 toggle()
和 siblings()
缩短了逻辑:
$('#element-container').on('click', 'div.button', function (event) {
$(this).siblings('.green-square').toggle()
});
示例小提琴
为了复制事件处理程序,您应该在克隆方法中发送 true:
$('div.add-element').click(function(event) {
$('div.element-holder').children('div').clone(true).insertAfter($('div.element-holder'));});
相关文章:
- 将函数的上下文应用于javascript变量
- 将CSS应用于printWindow.print();在Javascript中
- 如何将CSS(特别是填充/边距)应用于select下拉菜单的选项或optgroup
- $scope.apply()何时应用于angular
- Javascript非常简单:'阅读更多''显示较少'应用于Wordpress的功能
- 尝试应用于<tr>在ng单击中
- 如何将javascript仅应用于1个表单中的2个表单提交按钮中的1个
- 将脚本应用于Angular 2上的输入
- Json和$scope的角度之间的差异$eval应用于JSON字符串时
- 如何将参数应用于String.prototype.format函数
- 动态地将过滤器应用于 JSON.parse()
- Vue.js 数据对象不适用于某些 lodash 函数
- $location更改不适用于ngchange,而是应用于ngclick
- 如何将 :empty 选择器应用于 XML 文档
- 如何将图像数组应用于Meteor.js中的模板辅助对象
- 使用多个 css 类将 css 转换属性应用于 DOM 对象时遇到问题
- 将函数应用于 JavaScript 中的对象
- 将纹理应用于threejs对象
- 将jQuery应用于Google Maps控件中的HtmlDivElement对象
- 如何将更改应用于JavaScript数组中的数据对象