1

在调用页面上，我使用 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 按钮会导致该过滤器被删除，并且所有剩余的过滤器都重新编号；除了必须保留一个过滤器之外。我的原始代码使用 .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 中删除了元素）。

有什么想法吗？

4

2 回答 2

1

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

于 2013-02-13T17:44:51.660 回答
0

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

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

当我单击保存按钮时，一切都保存得很好，直到我在 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
});

从那时起，一切都保存了一次。

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

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

于 2013-03-15T21:27:58.650 回答