jQuery：单击函数在闭环中绑定到for循环中

Question

我被困在这里，任何提示都会很好。
我有一个Objects objects []数组和divnames []数组。 我的对象上具有play（）和stop（）之类的功能。 该对象及其功能已在多种情况下进行了测试，它们正在工作。 现在，我正在尝试遍历divnames []并将适当的对象[]的操作分配给mouseover，mouseout和click。
有一个关闭问题，我用在StackOverflow上另一个线程中找到的解决方案进行了修复。 这样可行。 但是剩下的问题是，mouseover等操作未分配给稍后加载的div。 他们从一开始就在页面上的对象上工作。
这是我所拥有的：

$(function(){
    for (var i=0, len=divnames.length; i<len; i++) {
        if(divnames[i]){
            (function( ) { // anonymous function to fix closures
                var index = i; // also needed to fix closures
                $('#'+divnames[index]).on("click", function() {
                    objects[index].play();
                    loadContent(divnames[index]+".php");
                });
            })( ); // direct function execution to fix closures
        }
    }
});

如上所述，闭包问题由两条注释行解决，将其保留将仅适用于for循环的最后一次执行。 到现在为止，这是可行的。
但是不起作用的是，click函数也应该应用于与选择器匹配的div，但尚未加载。
但是，如果没有闭包修复的情况下没有在for循环中迭代具有相同功能的代码，那确实可行，因为如果我正确理解的话，那就是预期的.on（）行为。

那么，如何才能使这两个所需的功能同时起作用？

谢谢您的时间。

- - 编辑 - -

要求的其他信息：

var divnames = [];
divnames[0] = "home";
divnames[1] = "about";
divnames[2] = "projects";

function SpriteAnim (options) {
var timerId = 0; 
    var i = 0;
    this.status = 0;
this.init = function () {
    var element = document.getElementById(options.elementId);
    element.style.width = options.width + "px";
    element.style.height = options.height + "px";
    element.style.backgroundRepeat = "no-repeat";
    element.style.backgroundImage = "url(" + options.sprite + ")";
};
this.showFrame = function (which) {
    if (which < options.frames) {
                    i = which;
        element = document.getElementById(options.elementId);
        element.style.backgroundPosition = "0px -" + which * options.height + "px";
    }
};
this.play = function () {
            this.status = 2;
    timerId = setInterval(function () {
        if (i < (options.frames - 1)) {
                            i++;
            element = document.getElementById(options.elementId);
            element.style.backgroundPosition = "0px -" + i * options.height + "px";
                    } else {
                        clearInterval(timerId);
                        this.status = 1;
                    }
    }, 100);
};
}

您可能已经猜到了，objects []数组在objects [0]，objects [1]，objects [2]中包含3个SpriteAnim对象。

objects[0] = new SpriteAnim({
    width: 7,
    height: 7,
    frames: 8,
    sprite: "myanim1.png",
    elementId: "anim0"
});
objects[1] = new SpriteAnim({
    width: 7,
    height: 7,
    frames: 8,
    sprite: "myanim1.png",
    elementId: "anim1"
});
objects[2] = new SpriteAnim({
    width: 7,
    height: 7,
    frames: 8,
    sprite: "myanim2.png",
    elementId: "anim2"
});

Answer 1

您需要使用事件委托，并在父元素而不是元素本身上侦听这些事件。 这样，如果以后添加新元素，则无需重新绑定到它们。

$("#buttons").on("click", ".button", function(){
    console.log("You clicked on a .button element.");
});

在这种情况下，我们绑定到#buttons上的click事件，但仅在调用元素与选择器.button匹配.button 。 您的标记将类似于以下内容：

<div id="buttons">
    <a class="button">Foo</a>
    <a class="button">Bar</a>
</div>

当在任何.button元素上发生单击，并冒出气泡直到#buttons父级时，它将被拦截并触发处理程序。

Answer 2

这是因为索引是在绑定语句之外声明的。 当点击进入该调用时，它不知道什么是对象[索引]。

如果要保持相同的结构，请像下面这样重做函数：

$(function(){
    for (var i=0, len=divnames.length; i<len; i++) {
        if(divnames[i]){
            (function( ) { // anonymous function to fix closures
                var index = i; // also needed to fix closures
                $('#'+divnames[index]).on("click", function(e) {
                    switch ($(e.id).attr('name')){
                        case 'home':
                            objects[0].play();
                            loadContent('home.php');
                            break;
                        case 'about':
                        // do same
                        case 'projects':
                        // do same
                        default:
                            break;
                    }
                });
            })( ); // direct function execution to fix closures
        }
    }
});

实际上，您应该这样做：

$(document).on('click','div[name=home],div[name=projects],div[name=about]', function(){
    var name = $(this).attr('name');
    switch (name){
        case 'home':
            objects[0].play();
            break;
            // and so on
    }
    loadContent(name + '.php');
});

编辑：

当您单击div时，将了解的全部信息：

objects[index].play();
loadContent(divnames[index]+".php");