jQuery - 在 load() 之后向元素添加功能

Question

我有一些代码可以从另一个文件加载一些 html，它可以正常工作。但我正在努力从这个新加载的数据中访问元素。

我有这个代码：

var widgetSettings = $("<div>").addClass("widgetsettings").load('dashboard/chart-settings-form.php #editChartForm');
widgetSettings.appendTo(widget.element);
//so far so good...
widget.element.find('.date').each(function(i){
  $(this).datetimepicker(); //this doesn't work
  console.log('testing... '+$(this).attr('id')); //this doesn't even work...
});

我希望它能在从上述 url 加载的“#editChartForm”表单中找到这些文本框（它们在一个表格中）：

<input type="text" name="datefrom" id="datefrom" class="date" /> To: <input type="text" name="dateto" id="dateto" class="date" />

肯定正在加载 html。只是真的很困惑为什么我不能从 load() 事件中访问任何元素。

我还想对同一个表单上的取消按钮应用点击功能，我发现使其工作的唯一方法是在加载之前将其置于“实时”功能中：

$('.cancel').live('click', function() {
  //actions here...
});

有什么想法吗？

Answer 1

简单！因为 load() 方法是异步的，并且您的行 widget.element.find('.date') 是在 DOM 中实际上有任何匹配它的元素之前触发的！只需在您的 load() 中使用回调，如下所示：

$("<div>").addClass("widgetsettings").load('dashboard/chart-settings-form.php #editChartForm', function() {
  $('div.widgetsettings').find('.date').each(function(i){
    $(this).datetimepicker();
    console.log('testing... '+$(this).attr('id'));
  });
});

Answer 2

$("div").load("url here",function(){
    callbacks();
});

function callbacks(){

//put everything that you want to run after the load in here.
//also if the click function is in here it wont need the .live call

}

编辑：同样使用最新版本的 jQuery，您现在可以使用 .on 而不是 .live（效率更高），即。

$(".widgetsettings").on("click",".cancel",function(){
    //actions here
});

希望这会有所帮助:)