2014-12-26 2 views
-2

есть серия файлов для каждого испанского глагола, который я загружаю. Имена файлов из определенной папки были помещены в скрытый список на странице с помощью PHP. Я повторяю список с .each() для имени файла, а затем используя .load для загрузки данных из этого файла. Затем я использую функцию для фильтрации данных для определенного имени класса и заполнения неупорядоченного списка.jQuery .load() не помещает элементы в DOM

Проблема заключается в том, что эти теги li очень хорошо отображаются на странице, но они не вводятся в DOM, и я не могу нажать на них, чтобы активировать этот глагол.

Вот как я загружать их с .load потом при попытке использовать .click:

$("#allVerbFiles p").each(function() { 
    var newFile = (filePath + $(this).html() + " .vonly"); 
    $("#verbListHolder").load(newFile, function(){ 
     var verbName = $(this).find(".vonly").html(); 
     $("#verbList ul").append("<li class='verbName'>" + verbName + "</li>"); 
    }); 
}); 

$("#verbList ul").on("click", ".verbName", function(){ 
    verbMkr = ($(this).index() + 1); 
    rolodex = (42 - (27 * verbMkr)); 
    $("#verbList ul").css("marginTop", rolodex + "px"); 
    nextVerb(); 
}); 

Как я могу сделать эти Li теги появляются в DOM для щелкать?

РЕДАКТИРОВАНИЕ свой вопрос с решением I Found - ЕЩЕ БЫ ОЦЕНИВАЕМ ОБРАТНАЯ СВЯЗЬ

Я использую метод .delegate(), чтобы сделать эту работу. Я работал как шарм, но это лучший подход?

$(document).delegate("#verbList ul li", "click", function(){ 
    verbMkr = ($(this).index() + 1); 
    rolodex = (42 - (27 * verbMkr)); 
    $("#verbList ul").css("marginTop", rolodex + "px"); 
    nextVerb(); 
}); 
+0

Если 'each()' выполняет итерацию по нескольким элементам, не каждый вызов 'load()' собирается заменить все, что там есть? Я полагаю, что функция обратного вызова 'load()' не находит то, что она ищет, потому что что-то еще уже перезаписало ее. Это похоже на асинхронность. – David

+0

Любая ошибка в консоли? Какова цель использования метода '.load()' ajax здесь в цикле? Является ли '# verbList' потомок' # verbListHolder'? ETC ... Вам лучше предоставить конкретную конкретную выборку и соответствующую разметку HTML. –

+0

Я использовал .load() в цикле, чтобы получить имя файла для каждого имени файла в списке. Есть ли лучший подход? – Zemplate

ответ

1

Если вы видите элементы, они находятся в DOM. Это ваш обработчик кликов, который был неправильно установлен. Код, который вы показали нам, повторил дважды #verbList ul, что, вероятно, неверно.

Я так думаю, что вам нужно будет сделать это:

$("#verbList ul").on("click", ".verbName", function(){ 
    // ... the rest as is 
}); 

или, если у вас есть вложенные #verbList ul#verbList ul вы должны убедиться, что HTML-идентификаторы действительно уникальны!

Смежные вопросы