Question

我遇到了使每个克隆独立的问题，目前如果我点击任何克隆，整个“军队”将执行该功能（slideToggle（）），而不仅仅是我想要的单个div。 / p>

所以这是我的jQuery脚本

$(document).ready(function(){
    $(".box").click(function(){
        $(".resource").slideToggle();
        });
    $('#clone').click(function(){
        $('div:first').clone().appendTo('body');
    });
});

我的身体

<body>
<button id="clone">Add item</button>
<div class="my_inventory">
    <div class="box"> 
    <h2>CLICK HERE</h2>
    </div>

    <div class="resource"> 
    <p>CONTENT HERE</p>
    </div>
</div>
</body>

总结一下，我想通过点击相应的<h2>

，让克隆的每个“盒子”自行打开和关闭

我的猜测是我需要在某个地方this而不是jQuery中的类，但我一直在尝试$(this).find('.resource')而没有任何成功。

Answer 1

因为绑定事件处理程序时元素（第一个除外）不在DOM中，所以需要将事件处理委托给DOM中的祖先，在这种情况下，存在的最近的祖先是body元素，因此：

// selecting the closest ancestor element to the dynamically-added elements
// that is present in the DOM at the point of event-binding:
$('body')
// using on() to listen for the event(s) (in this case 'click') that occurs on
// the '.box' element(s),
// and then executes the anonymous function:
.on('click', '.box', function () {
    // looks to the parent of the clicked-element:
    $(this).parent()
    // finds the '.resource' element(s):
    .find('.resource')
    // applies the slideToggle() method:
    .slideToggle();
});

JS Fiddle demo

参考文献：

每个克隆都有jQuery单独的函数

1 个答案: