Jquery.live при событии загрузки

Мне нужно использовать функцию jquery .live() для действий над элементами, загружаемыми через ajax.

Например, div загружается через ajax .load()

<div id="mydiv"></div>

Обычно я делаю .live() с событием клика, но мне нужно знать, как сообщить dom, что этот новый div загрузился без каких-либо явных действий/событий от пользователя.

Этот код не работает, но я хочу сделать что-то вроде этого:

mydiv = $("#mydiv");

mydiv.live("mydiv.length > 0", function() {
       // do something
});

"mydiv.length" является заменой для типичного "click" или другого события.

Ответы

Ответ 1

Нет события "DOM changed", а создание одного - в браузере. Лучше всего использовать обратный вызов для метода загрузки для запуска функций, которые вам нужны.

$('#foobar').load('myurl.html',function() {
    var mydiv = $("#mydiv");
});

Ответ 2

Другой способ сделать это - использовать trigger(), чтобы вызвать собственное пользовательское событие (позвоните ему content_loaded). load() выполняет функцию обратного вызова, которую он вызывает по завершении:

function callback_function(responseText, textStatus, XMLHttpRequest) {
    //if we have valid data ...
    trigger("content_loaded");
}

$("your_selector").load("your_url", callback_function);

А затем просто настройте прослушиватель событий и запустите его всякий раз, когда ваше событие запущено.

$("your_selector").bind("content_loaded", your_results_loaded_function);

Ответ 4

Вы не можете использовать .live() с событием "load". См. Нерабочий пример того, что вы хотели бы сделать здесь: http://www.jsfiddle.net/S5L6Q/

Один из подходов - опрос таймера:

var length = $(".mydiv").length;
setInterval(function () {
  if ($(".mydiv").length > length) {
    length = $(".mydiv").length;
    // .. some code
  }
}, 100);

Это проверит каждые 1/10 секунды, чтобы узнать, добавлены ли некоторые из них. Это может быть очень дорого в зависимости от сложности вашего селектора.

Другим вариантом является подключение всех ваших вызовов AJAX через общую оболочку, которая может проверять длину и, при необходимости, выполнять ваш код, а затем выполняет входящий вызов.

function myAjax(url, data, callback) {
  function fullCallback(data) {
    if ($(".mydiv").length > 0) {
      //... your code...
    }
    if (callback) {
      callback();
    }
  }
  $.get(url, data, fullCallback);
};

Второй вариант - лучший маршрут, но первый может быть проще.

Ответ 5

Что создает #mydiv? Вы должны просто нажать //doSomething прямо рядом с функцией, которая создает #mydiv.

$.post("myURL.html", function(data){
  $("#mydiv").html(data);
  //doSomething

#mydiv не создает себя, в конце концов. Однако вы создаете #mydiv, используйте эту же функцию, чтобы делать все, что вам нужно.

Ответ 6

Например (расширение моего комментария выше) это из документов jQuery..

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('#mydiv').html(data);
    alert('Load was performed.');
  }
});

замените предупреждение кодом, который вы хотите выполнить/действием, которое вы хотите выполнить

Ответ 7

Обычно я обрабатывал бы любые действия, которые происходят, когда элемент загружается либо как часть механизма обратного вызова AJAX, либо как часть обработчика ready, который включен в возвращенный HTML-код обратного вызова успеха AJAX. Позднее работает хорошо, когда вы хотите загрузить частичный вид на страницу и хотите сохранить код с частичным представлением.

Частичный вид:

<div id="myDiv">
  ...
</div>

<script type="text/javascript">
   $(function() {
       $('#myDiv').somePlugin( ... );
   });
</script>

Использование обратного вызова

$.ajax({
   url: '/example.com/code.php',
   success: function(html) {
          var container = $('#container').html(html);
          $('#myDiv',container).somePlugin( ... );
   }
});

Ответ 8

.live не работает с готовым событием конечной нагрузки, как указано в документации jquery 1.3, вы не можете использовать загрузку и готовое событие с помощью live посетите http://api.jquery.com/live/ для получения дополнительной информации,

Ответ 9

Yap, это все еще немного дорого. Но вы можете попробовать следующее:

$(document).ready(function(){
    $(document).bind('DOMSubtreeModified', function() {
       if($("#mydiv").length > 0){
         //Here goes your code after div load
       }
    });
});