使用 e.stopPropagation() 将事件侦听器附加到 javascript 中的动态元素答案

【问题标题】：Attach event listener with e.stopPropagation() to dynamic elements in javascript使用 e.stopPropagation() 将事件侦听器附加到 javascript 中的动态元素
【发布时间】：2021-10-20 07:34:28
【问题描述】：

我正在尝试将 html 元素动态插入到已经创建的列表中，但是我要附加的新元素是事件侦听器 $(".").click(function(e){} 他们没有收到事件。

过程：

当用户向下滚动时获得更多广告（帖子）（无限滚动分页）通过控制器的 ajax 请求获取数据
控制器渲染新元素并将html返回给ajax
包含新帖子的 html 附加到网络

到底 - 每个动态插入的广告（帖子）都需要触发弹窗功能

我尝试使用$(".").on(click,function(e){}，但我还需要使用e.stopPropagation();，但此事件不支持该方法。

非常感谢您的解决方案。

图片：

1）当用户向下滚动时（无限滚动分页）获取更多的广告（帖子）从控制器的 ajax 请求获取数据，然后附加他

2) 控制器渲染新元素并将html返回给ajax

3) 在控制器中呈现的 html

4) 打开和关闭弹出事件监听器，我无法理解新的动态元素

[]

【问题讨论】：

请勿发布代码图片...代码是文本，请edit your question 并将代码添加为文本，以便我们在需要时复制/粘贴。
请发布您的代码，而不是您的代码图片...这个问题与 laravel 无关，因此请删除该标签。
您不能将委托事件处理程序与stopPropagation() 一起使用，因为委托依赖于传播到父元素的事件来进行处理。解决方法是遍历所需元素的新内容并将直接事件处理程序应用于它们。
$(...).click(function()... 现在只是$(...).on("click", function()... 的简写，前者被标记为已弃用（在某些地方/意见中）。所以你没有使用委托事件，因为那将是$(static_parent).on("click", dynamic_selector, function()...。
不清楚你为什么认为你需要e.stopPropagation()

标签： javascript html jquery laravel event-listener

【解决方案1】：

我成功了！

我用onclick="get_images(); event.stopPropagation();" 在我的html里面

另一个选项是onclick="get_images(event);" 并在函数内部

function get_images(e){
   e.stopPropagation();
}

然后所有的动态元素通过e.stopPropagation()获取函数

【讨论】：