Question

当元素通过ajax加载并附加到DOM时，我需要启动脚本。

这是HTML

<div id="one">
  <p>one</p>
  <button>Append</button>
</div>

这是javascript

$('button').on('click', function(){
  //in real life s is loaded via ajax
  var s="<p onload='myalert();'>two</p>";
  $('#one').append(s);
})

function myalert() {
  alert('ok');
}

警报永远不会触发。元素完全加载后如何捕获事件？

以下是可在其中玩耍的Codepen沙箱：https://codepen.io/xguntis/pen/rQERmW

Answer 1

尝试一下。

$('button').on('click', function(){
  //in real life s is loaded via ajax
  var s="<p id='twoP' >two</p>";
  $('#one').append(s).ready(function(){
    alert('ok');
  });
})

这将加载元素，然后触发回调

Answer 2

您不能在此处使用onload事件。为什么不将alert语句放在事件处理程序的结尾？

$('button').on('click', function(){
  //in real life s is loaded via ajax
  var s="<p>two</p>";
  $('#one').append(s);
  alert('ok');
})

Answer 3

我试图解决您的问题。因此，我找到了一种解决您的问题的方法。这是我的代码

$('button').on('click', function(){
  //in real life s is loaded via ajax
  var s="<p>two</p>";
  $('#one').append(s).ready(function(){
    alert('ok');
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div id="one">
  <p>one</p>
  <button>Append</button>
</div>

使用jQuery追加时onload不起作用

3 个答案: