0

我目前正在编写一个面向对象的模块，它将回调分配给动态生成的元素。

function Instant(containerID) {
    this.var1 = 0;
    this.var2 = 0;
    this.containerID = containerID;
    // and more variables...
};

这是动态生成containerID的 a 的 id 。我通过 Ajax 请求填充它，它读取如下文件：DIVDIV

<!-- content.html -->
<div class="general_container">
    <div class="top_container">
        <!-- plenty of divs, spans etc -->
    </div>

    <div class="tweet_section">
        <!-- plenty of divs, spans etc -->
    </div>
</div>

现在重要的部分是，我分配所有回调，如下所示：

Instant.prototype.addCallbacks = function() {
    $(this.containerID + " bar").click(function() {
        $(this.containerID + " bar").foo();
    });

    $(this.containerID + " bar").click(function() {
        $(this.containerID + " bar").foo();
    });

    $(this.containerID+ " bar").click(function(e) {
        $(this.containerID + "bar, " + this.containerID+ " bar").foo();
    });
});


如您所见，我总是必须this.containerID在每个选择器之前放置以分配事件。（因此，我确保我只选择一个元素）现在，我的代码充满了混乱，因为我有很多this.containerIDs。我不知道是否有更聪明的方法可以让我的代码变得简单。任何帮助将不胜感激。

这是一个示例JSFiddle。

请注意，这不是我真正的模块，我只是为了清楚起见而编造了它！

4

4 回答 4

1

那么你不应该使用ID。您应该改用类。

编辑您的代码需要很长时间，但这里有一个提示：向父级添加一个处理程序。使用事件委托，例如.on(). 然后让它倾听所有孩子，现在或未来。

于 2013-04-09T12:08:06.880 回答
0

就像@JosephTheDreamer 所说，使用Event Delegation。( Jquery.fn.on) 使用事件委托，您可以将一个处理程序设置为多个目标。这意味着内存中只有一个处理程序和动态事件处理程序集。

我做了一个修改你的代码的演示，看看...

Instant.prototype.addCallbacks = function () {
    var selfContainer = null, // DOMElement container
        me = this; // Object reference

    $('body').on("click", ".selection_container .btn-add", function () { //Using event delegation
        selfContainer = $(this).parents(".general_container"); //set DOMElement
        selfContainer.find("input[name=currentValue]").val(++me.instantValue);
    });

    $('body').on("click", ".selection_container .btn-subtract", function () {
        selfContainer.find("input[name=currentValue]").val(--me.instantValue);
    });

   $('body').on("click", ".selection_container .btn-reset", function () {
        me.instantValue = 0;
        selfContainer.find('input[name=currentValue]').val(0);
    });

    $('body').on("click", ".selection_container .btn-save", function () {
        me.savedValue = me.instantValue;
    });

    $('body').on("click", ".selection_container .btn-load", function () {
        me.instantValue = me.savedValue;
        selfContainer.find('input[name=currentValue]').val(me.savedValue);
    });
};

希望能帮助到你...

于 2013-04-09T12:51:27.703 回答
0

Create a separate java script file and put your add callbacks function in there and just pass the containerID. That way, you can re-use it later. However, looks like you cannot get rid of containterID since you will be needing that to do your add, subtract, save etc..

in your current file shown as above, 

Instant.prototype.addCallbacks = createAddCallbacks(this.ContainerID);

create addCallbacks.js

function createAddCallbacks(containerId)
{
Instant.prototype.addCallbacks = function() {
    $(containerId + " bar").click(function() {
        $(containerId + " bar").foo();
    });

    $(containerId + " bar").click(function() {
        $(containerId + " bar").foo();
    });

    $(containerId+ " bar").click(function(e) {
        $(containerId + "bar, " + containerIdD+ " bar").foo();
    });
});
}
于 2013-04-09T12:16:10.223 回答
0

所以，我想我根据这篇文章
找到了一个更好的方法， 我想限制我的选择器的范围。

首先，我将创建一个 jQuery 实例变量

function Instant(containerID) {
    this.var1 = 0;
    this.var2 = 0;
    this.container= $('#'+containerID);
    // and more variables...
};

并添加一个像这样的新原型

Instant.prototype.$ = function(selector){
    return this.container.find(selector);
};

我只会使用this.$(selector)更好的功能。

于 2013-04-09T12:38:40.043 回答