jQuery не может выбирать элементы AJAX

Question

Я пытаюсь выбрать элементы страницы, которые были добавлены после загрузки страницы. Смотрите пример до и после ниже. До - это источник страницы, а после - сгенерированный источник. По какой-то причине я не могу выбрать ничего, что было сгенерировано.

Это кажется странным, так как я уверен, что делал это раньше.

Спасибо за вашу помощь.

До:

<div class="foo"></div>

После того, как:

<div class="foo">
  <div class="bar"></div>
</div>

Answer 1

Все эти комментарии о связывании после добавления полезны.

Но если вы переключитесь на jQuery 1.3, вы можете использовать «live» вместо «bind» при первой настройке страницы, тогда вы получите свое событие даже на добавленных элементах.

http://docs.jquery.com/Events/live

Answer 2

Когда вы добавляете div к #auto_suggest, вам также необходимо привязать событие:

$("#auto_suggest").append("<div class='off'>Blah</div>");
$("#auto_suggest div.off").hover(function() { window.alert($(this).val()); });

В противном случае вы используете jQuery 1.3 и выше. Функция live() удовлетворит ваши потребности; например,

$("#auto_suggest div.off").live("hover", function() { window.alert($(this).val()); });

Answer 3

вы связываете событие до создания элемента dom, насколько я знаю, это не работает. Вместо этого вы можете добавить привязку после добавления. Хотя могут быть и другие решения.

Answer 4

хорошо, вот код, если я удаляю div.off в селекторе внизу, я получаю тестовое предупреждение, так как этот элемент не генерируется источником.

$(document).ready(function(){

$ (". Input_container input"). Keyup (function () {

var search; 
search = $(".search_container input").val();

if (search.length > 2){

  $.ajax({
    type: "GET", 
    url: "http://localhost:8080/search.xml",
    data: "zoom_query=" + search + "&zoom_xml=1",
    dataType: "xml",
    success: function(xml){

      $("#auto_suggest").empty(); 
      $("#auto_suggest").show();

      var _title = "";
      var _link = "";

      $("item", xml).each(function(){

        _title = $("title", this).text();
        _link = $("link", this).text();
        _context = $("zoom\\:context", this).text();

        if ($(this).length > 0){

          message = "<div class=\"off\">";
          message += "<div title='" + _context + "'>" + _title + "</div>";
          message += "<small>" + _link + "</small>";
          message += "</div>";

          $("#auto_suggest").append(message); 

        }
        else {

          $("#auto_suggest").hide();

        }

      });

    }

  });

}
else {

  $("#auto_suggest").hide();

};

});

$ ("# auto_suggest div.off"). Hover (function () {

  alert('test');

});

});

Answer 5

Это маловероятно. Я хотел бы сам увидеть источник?

В противном случае попробуйте использовать Firebug в Firefox / Iceweasel. Firebug - это находка - используйте вкладку «Консоль» - для сайтов, интенсивно работающих с ajax, где «View Source» - несовершенное решение Вы можете делать такие вещи, как:

$ (". Foo .bar")

и консоль выведет количество подходящих элементов!

Answer 6

Вам необходимо перепроверить весь ваш код. jQuery может получить доступ ко всем частям DOM, независимо от того, присутствуют они статически или динамически.

Нам нужен JavaScript, чтобы помочь вам в дальнейшем устранении неполадок.