Question

我的页面中有许多div元素使用knockout变量来控制每页显示多少div。最初呈现页面时，我将this的值设置为5，并使用jquery hoverintent插件将mouseout事件绑定到每个div。当用户点击显示更多链接时，我设置了max div t o10的值，现在显示了10个div元素，但只有前5个元素具有mouseout事件绑定。如果我现在再次调用绑定调用，前5个元素将附加2个事件。我可以看到使用

的事件数量

$("div.ratingbig").data('events').mouseout

我的问题是如何在再次附加事件之前删除原始绑定。或者是否有办法仅为新元素附加事件。

Answer 1

删除你需要在类似

之类的元素上调用jquery off所需的绑定

$("div.ratingbig").off('mouseout')

你的新div没有鼠标悬停事件的原因是他们不知道它

您可以使用jquery延迟事件处理程序来实现此目的。每当添加div时，这将绑定一个新事件。

使用类似容器的类在你生成的div周围放置一个包含元素，然后在其上运行类似的内容Event binding

$('div.container').on('mouseout','div.ratingbig',function(){})

这意味着div.container中的每个div.rating都将在事件发生时定义回调。

或者你可以使用knockout Event Binding将事件与每个div绑定。

像

这样的东西

<div data-bind="foreach: listOfDivs">
    <div class="ratingbig" data-bind="event: {mouseover: $root.someJsFunctionOnYourModel}"></div
</div>

链接中的第一个示例向您展示了如何做到这一点。

Answer 2

我添加了以下语句来从div元素中删除现有的hoverIntent，如果它在添加之前存在，它将插入mouseout事件

       if( $(this).hoverIntent != undefined){
            $(this).unbind("mouseenter").unbind("mouseleave")
            $(this).removeProp("hoverIntent_t");
            $(this).removeProp("hoverIntent_s");
        }
        $(this).hoverIntent(configObject);

因此，每次添加hoverintent之前，它都会检查事件是否已经存在，如果已经存在，它将首先被删除。现在我可以在更改knockout变量的值后调用上面的内容，所有元素都获得hoverIntent。

取消绑定元素中的jquery data.events

2 个答案: