重新打开 fancyBox 时创建的多个事件处理程序答案

【问题标题】：Multiple event handlers created when reopening fancyBox重新打开 fancyBox 时创建的多个事件处理程序
【发布时间】：2013-02-13 17:04:40
【问题描述】：

在调用页面上，我使用 href 绑定了我的 fancyBox，如下所示：

<a id="myId" href="myContent.cfm">Click me</a>
<script>
    $(document).ready(function(){
        $('a#myId').fancybox({
            // my initialization params 
        });
    });
</script>

在 myContent.cfm 中，构建了一个默认的“过滤器”，其中包含添加和删除按钮。像这样的：

<div id="fd_0" class="eachFilter blank">
    <select name="filterBy" class="fl filterBy">
        <option selected="selected">-- Add a Filter --</option>
        <!--- add more options --->
    </select>
    <button type="button" class="addFilter default" title="Add a filter to the current filter set.">+</button>
    <button type="button" class="deleteThisFilter default" title="Delete this filter from the current filter set.">-</button>
</div>

当点击 addFilter 按钮时，一个新的“默认”过滤器被添加到被点击过滤器之后的 dom 中，使用连续的 id。相反，单击 deleteFilter 按钮会导致该过滤器被删除，并且所有剩余的过滤器的 ID 都会重新编号；除了必须保留一个过滤器之外。我的原始代码使用 .live() 将事件处理程序附加到新创建的元素，如下所示：

$('.addFilter).live('click', function(){        
    // get number of existing filters
    // create new blank filter
    // add to the dom after the filter whose button was just clicked
});
$('.deleteThisFilter).live('click', function(){     
    // if there is more than one existing filter, use .remove() to remove the parent .eachFilter div
    // renumber the existing filter ids consecutively
});

在用户创建了他们需要的所有“过滤器”后，他们可以“应用”它们，关闭花式框并使用新的过滤参数重新加载网格，或者简单地取消并关闭花式框。

这一切在第一次运行良好，在重新打开fancybox 时，初始空白过滤器的添加按钮按预期工作。但是，在添加第二个过滤器之后，添加到 dom 的任何过滤器都会在 addFilter 和 deleteFilter 按钮中添加多个事件处理程序。如果我第一次添加了一个过滤器，然后第二次返回fancybox，然后通过单击默认过滤器的添加按钮添加过滤器，然后单击新创建的过滤器添加按钮，又添加了两个过滤器。如果我关闭，再次重新打开fancybox，添加一个过滤器，然后单击该过滤器添加按钮，又添加了三个过滤器。

所以这是我迄今为止尝试过的：

1) 将 .live() 调用更改为

$(document).on('click', 'addFilter', function(){ // add my filter code});

2) 将创建过滤器的代码放入一个函数中，最后使用 .bind() 将事件处理程序添加到新创建的过滤器中；然后使用

$('.addFilter').unbind('click', fnCreateMyFilter())

关于关闭花式框。

3) 仅在新创建的过滤器元素上使用 .live()，在默认元素上使用常规点击处理程序

4) 将 jQuery 从当前版本升级到 1.8.3

5) 在fancybox .onClosed 函数内的所有元素上调用.remove()（虽然我的印象是关闭fancybox实际上确实从 dom 中删除了元素）。

有什么想法吗？

【问题讨论】：

我注意到 .live() 实际上在 jQuery 1.7 中已被弃用。

标签： fancybox jquery

【解决方案1】：

与往常一样，它是最明显的东西，但并不明显。将 .js 代码从弹出窗口移到它自己的文件中解决了这个问题，这是我在让所有代码工作后打算做的事情。

【讨论】：

谢谢老兄！每次我关闭一个花式盒子并打开一个新盒子时，它打开的数量是我迄今为止打开的数量的两倍（而不仅仅是一个）......让我大吃一惊^^

【解决方案2】：

我使用了 Fancybox2 http://fancyapps.com/fancybox/ 和 Noty 弹出窗口 http://needim.github.com/noty/ 的组合并且遇到了类似的问题。

我使用href 链接中的class='fancybox.ajax' 通过ajax 将产品编辑表单加载到fancybox 中。

当我单击保存按钮时，一切都保存得很好，直到我在fancybox 中重新加载了另一个（或相同的）产品。

我使用这段代码来触发我的保存按钮：

$(document).on("click",".save_product_button",function(){
  ... post to ajax file to save info
});

使用触发多个通知弹出窗口和保存（每次刷新后我加载了一个花式框），因为保存按钮已经在文档模型中加载了很多次。（我猜？？）

但是当我将 on() 更改为保存按钮的直接父级时，我的所有问题都消失了。

$("#productBox").on("click",".save_product_button",function(){
  ... post to ajax file to save info
});

从那时起，所有内容都保存一次。

另外，这应该会使代码更快一点。

希望这可以帮助别人不要像我刚才那样浪费半天时间。

【讨论】：