Question

在调用页面上，我使用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按钮时，使用连续的ID在单击的过滤器之后将新的“默认”过滤器添加到dom。相反，单击deleteFilter按钮会删除该过滤器，并使所有剩余的过滤器重新编号。除了必须剩下一个过滤器。我的原始代码使用.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并使用新的过滤参数重新加载网格，或者只是取消并关闭fancybox。

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

所以这就是我到目前为止所尝试的内容：

1）更改 .live（）调用

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

2）将代码设置为函数，最后使用 .bind（）将事件处理程序添加到新创建的过滤器中;然后使用

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

关闭fancybox。

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

4）从当前版本

升级jQuery到1.8.3

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

有什么想法吗？

Answer 1

与往常一样，这是最明显的事情，并不是很明显。将.js代码从弹出窗口移动到其自己的文件中修复了问题，这是我在使所有代码工作之后打算做的事情。

Answer 2

我正在使用Fancybox2 http://fancyapps.com/fancybox/和Noty popups http://needim.github.com/noty/的组合，并遇到类似的问题。

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

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

我正在使用此代码触发我的保存按钮：

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

使用触发的多个弹出窗口和保存（每次刷新后我都加载了一个fancybox），因为保存按钮已经多次加载到文档模型中。（我猜??）

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

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

从那时起，所有东西都保存了一次。

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

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

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

2 个答案: