javascript - 对通过 Ajax 加载但未在源代码中打印的 html 运行 Javascript 或 Jquery

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 5 年前。

我的页面上有一个链接，如果单击该链接，将通过 Ajax 生成一个弹出窗口。 (弹出代码不受我控制)

现在我想通过我的代码 jQuery 在该弹出窗口的链接上添加功能。

页面加载后，此弹出窗口不会在源代码中打印。显然 jQuery 找不到这个链接。

如何在此 ajax 弹出窗口中的此链接上添加 click() 触发器功能？

Answer 1

如果我正确理解了问题，则不会触发您的 click 事件，因为目标是在附加事件后加载的。要修复它，您可以取消“[on]”( http://api.jquery.com/on/ ) 方法。

$("#myModal").on( "click", "a#myLink", function() {
  console.log( "click fired");
});

$("#modalContainer").on( "click", "#myTargetElement", function() 
{
  console.log("click fired");
});

$('#btn').click(function()
               {
  $('#modalContainer').html("<div id='myTargetElement'>ajax loaded content</div>")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modalContainer">initial content</div>
<button id=btn>fake ajax load</button>