jquery 动态添加 div 多次触发一个函数

Posted 2023-05-09

【中文标题】jquery 动态添加 div 多次触发一个函数

【英文标题】：jquery dynamically added divs firing a function more than once

【发布时间】：2014-12-29 16:47:13

【问题描述】：

我有一个动态添加 div 的页面。所有 Div 都是可拖动和调整大小的。如果我单击 div，它应该可以编辑。这是我的测试代码。

http://jsfiddle.net/hqhqb5ut/1/

点击first Div查看。

但如果我单击拖动 div，则应该只进行拖动。如果只有一个 div，这可以正常工作。但是如果我添加更多的 div，只有最后一个行为正确。即使我拖动，以前的也可以编辑。

我检查了控制台，似乎该函数被多次调用，因为有多个具有相同类的 div。

我该如何解决这个问题？

更新 1： 我已经弄清楚了动态部分。我看到了 SO question，被建议为重复。但这里有一个具体问题。如果您点击“添加 div”，并​​尝试拖动 div，则只能拖动 LAST ADDED DIV。当然，有一个功能可以检查它是否被拖动，但是由于多个div而失败。

http://jsfiddle.net/hqhqb5ut/1/

【问题讨论】：

@arun-p-johny 我看到了这个问题，但这并不能解决问题。你能看看更新的小提琴吗？看看添加更多div后是否可以拖动div？只能拖动最后添加的 div。

我重新打开了您的问题，但请务必在此处输入所有必需的信息。不要只是链接到它。谢谢，祝你好运。

@aVC 我可以拖动所有添加的 div ......你能再检查一遍吗

@ArunPJohny 第一次可以拖动。但是如果你在一个div里面点击一次，然后在外面点击一次，那么它就不能被拖动了。

【参考方案1】：

使用事件委托，您的代码应该可以正常工作：

$('#documentMain').on('mousedown', '.dv1', function()  ..... );

Demo

正如您在演示中看到的那样，更改使添加的 div 可以多次编辑和拖动。

【讨论】：

不适合我。如果添加一个div，点击这个新添加的div里面的

你用的是什么浏览器？我在 Chrome 上，一切正常！

ubuntu14 上的铬。第一个div很好。我同意。可以对新添加的 div 重复一下效果吗？

很可能你正试图通过可编辑区域给它下药；你必须抓住不可编辑的区域。光标必须是指针。

没错。这就是为什么我有一个函数 validateClick() 来检查我是否在拖动或单击以进行编辑。 :(