Question

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

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

此处containerID是动态生成的DIV的ID。我通过Ajax Request填充此DIV，它读取如下文件：

<!-- 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.containerID个。我不知道是否有一种更聪明的方法可以让我的代码变得简单。任何帮助将不胜感激。

以下是JSFiddle示例。

请注意，这不是我真正的模块，我只是说清楚了！

Answer 1

然后你不应该使用ID。你应该使用类。

It would take long to edit your code，但这里有一个提示：向父级添加处理程序。使用事件委派，例如.on()。然后让它听取现在或将来的所有孩子。

Answer 2

创建一个单独的java脚本文件并将add callbacks函数放在那里，然后传递containerID。这样，您可以稍后重复使用它。但是，看起来你无法摆脱containterID，因为你需要做你的加，减，保存等。

在您当前显示的文件中

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

创建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();
    });
});
}

Answer 3

所以，根据this post，我认为我找到了更好的方法我想限制选择器的范围。

首先，我将创建一个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)功能。

Answer 4

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

I made a demonstration修改您的代码，看看......

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);
    });
};

希望它有所帮助...

如何为动态生成的html元素编写jquery选择器？

4 个答案: