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

Question

我在我的页面上有一个链接，如果点击，将产生一个通过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>

​