jQuery在新对象中克隆了html元素鼠标事件

Question

---

好的，情况如下：

我创建了一个对象，其中包含一个方法来 (jQuery) 克隆和附加一个 html 元素，并将对该新 html 元素的引用存储在对象中。

然后我在我的代码的主要区域有一个循环来生成一堆对象的新实例，对于每个新实例，我运行该方法来创建一个新的 html 元素。

现在这就是上下文...我想知道的是...我可以在对象中放置一个方法来处理 html 元素上的鼠标悬停事件，该元素是为对象的每个实例创建的，因此特定于新的对象的实例......我的理由是纯粹的简洁代码。通过循环遍历我创建的对象的实例并将鼠标事件附加到每个实例，我可以很容易地从对象中完成它。

但是在方法内部会很好..

这是我尝试过的：

NOTE 在下面的代码中，“this.html_element”是对存储在对象实例中的克隆 html 元素的引用，“this.element_id”是对象实例的属性存储唯一 ID 的对象。

this.html_element.mouseover((function(id){
    console.log(id);
})(this.element_id));

在我看来应该可以工作..确实可以..但不是我想要的方式...我直接跑了，而无需等待 html_element 上的鼠标悬停事件...当您将鼠标悬停在上面时根本不起作用。

控制台日志显示：

1
2
3
4

等等...这仅对应于我制作的对象的实例数。

我也试过了：

this.html_element.mouseover(function(){
    console.log(this.element_id);
});

当鼠标悬停事件发生时它会触发，但当然没有那么容易，控制台日志会吐出：

undefined

所以我想我需要一些介于两者之间的东西，但我想不出那可能是什么……有什么想法吗？

Answer 1

你需要一个闭包变量：

var self = this;
this.html_element.mouseover(function() {
    console.log(self.element_id);
});

Answer 2

如果我没记错的话，您想要实现的是随时随地添加取决于元素属性 (id) 的事件处理程序。

如果是这样，您应该尝试阅读 jQuery 的.on()。使用它，您可以将事件处理程序绑定到 DOM 元素，即使它尚不存在。对于参数，您可以尝试使用自定义属性从 HTML 元素本身获取（当然，只有在需要的情况下）。

例如，如果一个对象由一个.item 元素表示（将放在.container 中），您可以在该元素上添加属性data-id：

<div class="container">
    <div class="item" data-id="1">...</div>
    <div class="item" data-id="2">...</div>
    <div class="item" data-id="3">...</div>
</div>

然后，在脚本方面：

$('.container').on('mouseover', '.item', function () {
    var elementId = $(this).attr('data-id');
    console.log(elementId);
});

查看JSFiddle。

不过，这一切都取决于您的情况；只是建议一个替代方案。