jQuery - добавить функциональность в элемент после load () - PullRequest
Новая
       14

jQuery - добавить функциональность в элемент после load ()

4 голосов
/ 10 марта 2011

У меня есть код, который загружает 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...
});

Я ожидаю, что он найдет эти текстовые поля в форме '#editChartForm'загружается из указанного выше URL (они находятся в таблице): 

<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...
});

Есть идеи, что происходит?

Ответы [ 2 ]

6 голосов
/ 10 марта 2011

Simple!Поскольку метод load () является асинхронным, и ваша строка widget.element.find('.date') запускается ДО того, как на самом деле в DOM есть какие-либо элементы, соответствующие ему!Просто используйте обратный вызов в вашей нагрузке (), например: 

$("<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'));
  });
});
2 голосов
/ 10 марта 2011 
$("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
});

надеюсь, это поможет:)

...