委托不适用于克隆对象

Question

我在jquery中使用委托遇到了一个奇怪的问题。

HTML：

<div id="workbenches">
    <div class="carousel-inner">
        <div class="item active">
            <div class="workbench">
                <a href="javascript:void(0)">Link</a>
            <div> <! .workbench -->
        </div> <!-- .item -->
    </div> <!-- .carousel-inner -->
</div> <!-- #workbenches -->

Javascript：

在以下javascript中，我克隆了div.item对象。

<script type="text/javascript">
    $(document).ready(function() {
        var workbenchObject = $('.carousel-inner .item');
        workbenchObject.clone().prependTo('#workbenches .carousel-inner').removeClass('active');
        workbenchObject.clone().appendTo('#workbenches .carousel-inner').removeClass('active');
    });
</script>

由于某些标记是由javascript生成的，因此我尝试将click事件绑定到a标记。

<script type="text/javascript">
    $('.workbench').delegate('a', 'click', function() {
        alert('hello');
    });
</script>

然而，上面只有代码运行于最初的a标签（上克隆的对象不工作）。

代码有什么问题？ 你能帮助我吗？

Answer 1

您需要将处理程序绑定到#workbenches （或#workbenches .carousel-inner ），因为.workbench对象是动态创建的。 即使在事件委托中，也应将对处理程序的委托添加到静态元素中。

$('#workbenches').delegate('.workbench a', 'click', function() {
    alert('hello');
});