jQuery не обращается к элементам DOM, загруженным через .load ()

Question

Я прочитал некоторые другие посты и последовал их совету, но безрезультатно.Моя функция вызывается через событие onclick, встроенное в элемент.Все отлично работаетДанные загружаются, а мой обработчик событий фокуса - нет.«d-категория» - это класс загруженных элементов.Это имеет несколько вхождений в загруженном коде.Однако я попытался изменить код на отдельный идентификатор для каждого элемента, но это все равно не сработало.Рассмотрим код:

function loadData(id) {
            $("#entry-body").slideUp();
            $("#entry-head").slideUp();
            $("#edit-entry").load("/edit/", { id:id }, function(){
                $(".d-category").focus(function(){
                            $(this).html('<p>example html</p>');
                                    });
                            });
            $("#edit-entry-head").slideDown();
            $("#edit-entry").slideDown();

        };

Я пытался переместить блок кода, содержащий обработчик события фокуса, в другие места вместе с .live (), чтобы связать его с загруженными элементами, но безрезультатно.Есть идеи?

---

РЕДАКТИРОВАТЬ

Я считаю, что проблема с кодом выше в том, что .d-category соответствует только первый индексированный элемент?Тем не менее, я наткнулся на то, что работает именно так, как я хочу.Я добавлю ответ ниже.

Answer 1

РЕДАКТИРОВАТЬ: Не уверен, почему .click(function() {...}); не работает для вас. Вам нужно будет предоставить больше кода, чтобы узнать, что не так.

Прежде чем использовать .live(), вы должны подумать, подойдет ли вам .delegate(). Это похоже на .live(), но оно ограничено определенной частью страницы и поэтому более эффективно.

Предполагая, что элемент edit-entry присутствует при загрузке страницы, поместите его где-нибудь в функцию .ready().

$("#edit-entry").delegate('.d-category', 'click', function() {
    $(this).html('<p>example html</p>');
});

Затем удалите присвоение обработчика из вашего .load() обратного вызова.

---

РЕДАКТИРОВАТЬ: Я неправильно указал, что вам нужно .find() элементы в возвращаемых данных. Это неправильно с .load().

Проблема, скорее всего, заключается в том, что событие .focus() помещается не в элемент input, или .html() вызывается в элементе input.

Кроме того, вам не хватает ни одной кавычки после <p>example html</p>. Я предполагаю, что это просто опечатка.

---

Оригинальный ответ

Элементы .d-category в загружаемых данных? Если это так, вам нужно .find() их в этих данных.

   // Reference the data returned --------------------v
$("#edit-entry").load("/edit/", { id:id }, function( data ){
               // Find the .d-category elements in the data
            $(data).find(".d-category").focus(function(){
                        $(this).html('<p>example html</p>');
             });
});

Мне было бы любопытно узнать, что это за элементы. .focus() обычно используется для input элементов, поэтому я не уверен, почему вы бы назвали .html().

И, не зная структуры HTML data, я должен указать, что вам может потребоваться .filter() вместо (или вместе с) .find(), если элементы .d-category находятся в корне data .

• http://api.jquery.com/find/
• http://api.jquery.com/filter/

Answer 2

Вот что работает так, как я хотел:

function loadData(id) {
            $("#entry-body").slideUp();
            $("#entry-head").slideUp();
            $("#edit-entry").load("/edit/", { id:id }, function(){
                $('.d-category').each(function(){
                    $(this).one('click', function(){
                        $(this).insertSelectbox();});});

            });
            $("#edit-entry-head").slideDown();
            $("#edit-entry").slideDown();
            }

$.fn.insertSelectbox = function(){
        var sid = $(this).attr('id');
        var opt1 = $('#' + sid).html();
        $("#" + sid).html('<select name="category" id="cat-selector"><option>'  
        + opt1 + '</option>{% for cat in ctgy %}<option>{{ cat.name }}</option>'
        + '{% endfor %}</select>');}

Я уверен, что это можно улучшить еще немного ... но это работает!

Answer 3

Используйте это вместо:

$(".d-category").live('focus', function() {
     $(this).html('<p>example html</p>');
})