jQuery .load（）正在阻止我的脚本在移动设备上

Question

我正在使用jQuery .load()在页面中包含一些HTML。内容按预期显示，但与所包含HTML绑定的所有事件均无效

$('.main').empty().load("foo.html");
$(function() {
  $('select').on('change', function(){
    alert('bar');
  });
});

它可以在台式机上运行，​​但不能在移动设备上运行。我不知道为什么...我想load()函数对此负责，因为一旦我将HTML内容直接放在主页上，它就起作用了...

Answer 1

根据docs，您将需要利用complete回调函数来了解HTML何时完成加载。由于此操作是异步的，因此您需要等待其完成，然后再尝试将事件处理程序附加到尚未加载的DOM元素上。

$('.main').empty().load("foo.html", function complete() {
  $('select').on('change', function(){
    alert('bar');
  });
});