我想再次使用 $("divid").load(...) 将包含自己脚本的页面加载到 div 中。我面临的问题与事件有关。假设我们从父页面触发(“猴子”)，在加载的页面上我们绑定(bind)(“猴子”)并执行警报(“猴子绑定(bind)”)。如果多次调用相同的加载方法，则多次调用绑定(bind)。现在我可以在绑定(bind)之前取消绑定(bind)，或者在绑定(bind)之前检查处理程序的数量然后不绑定(bind)它以防止这种情况发生。如果我以后想在另一个“子页面”(加载到 div 中的页面)中绑定(bind)到该触发器，这两个选项都不可扩展。

我理想情况下想要做的是检查我要添加的处理程序是否已经存在，但我仍然想使用匿名处理程序......(我认为最后一个请求有点多)。目前，我有一个解决方法，即使用预定义/命名方法，然后在绑定(bind)之前检查它。

// Found this on StackOverflow
function getFunctionName(fn)
{
 var rgx = /^function\s+([^\(\s]+)/
 var matches = rgx.exec(fn.toString());
 return matches ? matches[1] : "(anonymous)"
}

function HandlerExists(triggerName, handlerName) {
        exists = false;
        if ($(document).data('events') !== undefined) {
            var event = $(document).data('events')[triggerName];
            if(event !== undefined)
            {
                $.each(event, function(i, handler) {
                    alert(handlerName);
                    if (getFunctionName(handler) == handlerName) {
                        exists = true;
                    }
                });
            }
        }
        return exists;
    }

我觉得这是一种非常粗略的处理方法，但似乎有效。我只是在绑定(bind)之前执行以下操作，如下所示:

if (!HandlerExists("test", "theMethod")) {
    $(document).bind("test", theMethod);
}

有没有人有更优雅的解决方案？例如，有什么方法可以检查特定脚本是否已加载？所以我可以使用 getScript() 在第一次加载时从子页面加载 js，然后在后续加载时简单地不加载它(并且只是触发一个将由他预先存在的 js 处理的触发器)。

最佳答案

使用 jQuery 的事件命名空间防止重复绑定(bind)

实际上有几种不同的方法可以防止重复。一个只是在解除绑定(bind)时传递原始处理程序，但如果它是一个副本并且不在内存中的同一空间中，它将不会解除绑定(bind)，另一种流行的方法(使用 namespace )是实现此目的的更确定的方法。

这是事件的常见问题。因此，我将稍微解释一下 jQuery 事件和使用命名空间来防止重复绑定(bind)。

ANSWER:(简明扼要)

// bind handler normally
$('#myElement').bind('myEvent', myMainHandler);

// bind another using namespace
$('#myElement').bind('myEvent.myNamespace', myUniqueHandler);

// unbind the unique and rebind the unique
$('#myElement').unbind('myEvent.myNamespace').bind('myEvent.myNamespace', myUniqueHandler);
$('#myElement').bind('myEvent.myNamespace', myUniqueHandler);

// trigger event
$('#myElement').trigger('myEvent');

// output
myMainHandler() // fires once!
myUniqueHandler() // fires once!

答案示例:(完整详细解释)

首先让我们创建一个要绑定(bind)的示例元素。我们将使用 ID 为#button 的按钮。然后制作 3 个函数，它们可以并将用作处理程序以绑定(bind)到事件:

函数 exampleOne() 我们将通过单击进行绑定(bind)。 函数 exampleTwo() 我们将绑定(bind)到点击的命名空间。 函数 exampleThree() 我们将绑定(bind)到点击的命名空间，但多次解除绑定(bind)和绑定(bind)而不删除其他绑定(bind)，这可以防止重复绑定(bind)，同时不删除任​​何其他绑定(bind)方法。

示例开始:(创建要绑定(bind)的元素和一些方法作为我们的处理程序)

<button id="button">click me!</button>


// create the example methods for our handlers
function exampleOne(){ alert('One fired!'); }
function exampleTwo(){ alert('Two fired!'); }
function exampleThree(){ alert('Three fired!'); }

将exampleOne绑定(bind)到click:

$('#button').bind('click', exampleOne); // bind example one to "click" 

现在，如果用户单击按钮或调用 $('#button').trigger('click')，您将收到警报“One Fired!”；

将 exampleTwo 绑定(bind)到 click 的命名空间:“名称是任意的，我们将使用 myNamespace2”

$('#button').bind('click.myNamespace2', exampleTwo);

这很酷的是，我们可以触发将触发 exampleOne() 和 exampleTwo() 的“click”，或者我们可以触发将仅触发 exampleTwo() 的“click.myNamespace2”

将 exampleThree 绑定(bind)到 click 的命名空间:“同样，名称是任意的，只要它与 exampleTwo 的命名空间不同，我们将使用 myNamespace3”

$('#button').bind('click.myNamespace3', exampleThree);

现在，如果“点击”get 被触发，所有三个示例方法都将被触发，或者我们可以针对特定的命名空间。

将它们放在一起以防止重复

如果我们继续像这样绑定(bind) exampleThree():

$('#button').bind('click.myNamespace3', exampleThree); 
$('#button').bind('click.myNamespace3', exampleThree);
$('#button').bind('click.myNamespace3', exampleThree);

它们会被解雇三次，因为每次调用 bind 时都会将其添加到事件数组中。所以，真的很简单。只需在绑定(bind)之前解除该 namespace 的绑定(bind)，如下所示:

$('#button').unbind('click.myNamespace3').bind('click.myNamespace3', exampleThree); 
$('#button').bind('click.myNamespace3', exampleThree);
$('#button').unbind('click.myNamespace3').bind('click.myNamespace3', exampleThree); 
$('#button').bind('click.myNamespace3', exampleThree);
$('#button').unbind('click.myNamespace3').bind('click.myNamespace3', exampleThree); 
$('#button').bind('click.myNamespace3', exampleThree);

如果点击函数被触发，exampleOne()、exampleTwo() 和 exampleThree() 只会被触发一次。

将它们全部封装在一个简单的函数中:

var myClickBinding = function(jqEle, handler, namespace){
    if(namespace == undefined){
        jqEle.bind('click', handler);
    }else{
        jqEle.unbind('click.'+namespace).bind('click.'+namespace, handler);
    }
}   

总结:

jQuery 事件命名空间允许绑定(bind)到主事件，但也允许在不影响兄弟命名空间或父命名空间的情况下创建和清除子命名空间，以极少的创造性思维允许防止重复绑定(bind)。

进一步解释:http://api.jquery.com/event.namespace/

关于JQuery 事件模型和防止重复处理程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2180326/