使用 jquery append 时 onload 不起作用

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

您不能在那里使用 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 2

试试这个..

$('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 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 append 时 onload 不起作用

onload not working when using jquery append

javascript

jquery

append

onload