Question

我正在加载的每个西班牙语动词都有一系列文件。使用PHP将特定文件夹中的文件名放入页面上的隐藏列表中。我正在使用.each（）遍历列表中的文件名，然后使用.load来加载该文件中的数据。然后，我使用函数过滤特定类名的数据并填充无序列表。

问题是这些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中以便点击？

用我发现的解决方案编辑我自己的问题 - 仍然会给予反馈意见

我正在使用.delegate（）方法来完成这项工作。我的工作就像一个魅力，但这是最好的方法吗？

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

Answer 1

如果你看到元素，它们就在DOM中。这是您的点击处理程序未正确附加。您向我们展示的代码重复#verbList ul两次，这可能是错误的。

我认为您需要这样做的方式：

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

或者，如果你有嵌套#verbList ul#verbList ul，你应该确保html id真的是唯一的！

jQuery .load（）没有将元素放入DOM中

1 个答案: