附加的 JQuery 检测小部件

Question

我有一个带有中等数量的 ajax 请求的 Web 应用程序。

我在头部加载所有 jquery 和 jquery 小部件，然后在关闭 body 标记之前加载我的 base.js。

function baseScripts() {
        $(".open-dialog").click(function (event) {
            event.preventDefault();
            event.stopPropagation();        
            alert("Opening dialog");        
            href = $().buildUrl($(this).attr("href"), "&isAjax=true");        
            $().createDialog(href, "Window Title");        
            return false;
        });

        $("input:hidden.select").each(function () {
                var element = $(this);            
                if (!($("#s2id_" + element.attr("id")).length)) {
                    $(element).select2({
                        // select2 properties...
                    });
                }
            });
        }
}

脚本块在每个 AJAX 请求上加载基本脚本

$(document).ajaxComplete(baseScripts);

问题是在每次 ajax 请求后，它会再次调用基本脚本，并且它们会多次打开对话框并多次附加 select2。

如何检测小部件是否已附加到元素或类中？ 在每个 ajax 请求上执行脚本（就像我一样）这是一种不好的做法？

Answer 1

在ajaxComplete 上重新绑定click 事件和select2 是没有意义的。它们应该是一次性绑定，在这种情况下，您可以这样做：

$(document).ready(function(){
    baseScripts();

    function baseScripts() {
        $(".open-dialog").click(function (event) {
            event.preventDefault();
            event.stopPropagation();

            alert("Opening dialog");

            href = $().buildUrl($(this).attr("href"), "&isAjax=true");

            $().createDialog(href, "Window Title");

            return false;
        });

        $("input:hidden.select").each(function () {
            var element = $(this);

            if (!($("#s2id_" + element.attr("id")).length)) {
                $(element).select2({
                    // select2 properties...
                });
            }
        });
    } 
});