如何使用 JQuery 解决 livequery 的问题答案

【问题标题】：How to resolve issue with livequery using JQuery如何使用 JQuery 解决 livequery 的问题
【发布时间】：2023-04-10 17:36:01
【问题描述】：

我动态加载 HTML 元素.. 并使用 livequery() 插件来处理点击事件.. 但只能点击第一个元素。

这是我的初始 DOM：

<div id="styleList">
    <h4 class="subPaneTitle blurred">List of themes</h4>
    <ul>
        <li class="listHeader">
            <span class="themeID">Theme ID</span><span class="themeName">Theme Name</span>
            <span class="themeAction">Action</span>
        </li>
    </ul>
    <p class="createNewStyle clearfix"><a id="createNewStyle" class="btnStyle1 blurred ui-corner-all">Create new theme</a></p>
</div>

这是我从 xml 动态加载元素的代码：

$.get("http://localhost/ShopNGo_Blitz_revised_w_YAML/site_styles_list.xml", loadAllThemes);
function loadAllThemes(data) {
    $(data).find("style").each(function () {
        var thisStyle = $(this);
        var styleID = thisStyle.attr('id');
        var styleName = thisStyle.attr('name');
        var styleStatus = "";
        if (thisStyle.attr('status') == "used") {
            styleStatus = '<span class="statusIndicator">Current theme</span>';
        }
        $("#styleList ul").append('<li><span class="themeID">' + styleID + '</span><span class="themeName">' + styleName + '</span><span class="themeAction"><a id="themePreview">Preview</a></span><span class="themeAction"><a id="themeEdit">Edit</a></span><span class="themeAction"><a id="themeDelete">Delete</a></span><span class="themeAction"><a id="themeUse">Use</a></span>' + styleStatus + '</li>');
    });
}

这是我的“编辑”点击事件代码：

$("div#styleList").find("ul").find("li").find("a#themeEdit").livequery("click", function () { //this gets only the first element.
    var themeName = $(this).parent().prev().prev(".themeName").text();
    $("#siteStyleContent").tabs("select", "#styleEditTabs");
    $("div#styleEditTabs").children("#themeName").text(themeName);
});

【问题讨论】：

标签： jquery

【解决方案1】：

您将 ID 用作类。查看所有这些问题，了解为什么这是一件坏事：

基本上，ID 应该是唯一的。当您有一组东西（例如，编辑链接）时，将它们分组的正确方法是使用类。当您搜索#themeEdit 时，jQuery 会假设只有一个并返回第一个，因为它应该是这样的。您需要为链接指定themeEdit 的class，然后将它们搜索为.themeEdit。

此外，jQuery 1.3 内置了live 功能，所以如果你正在使用它，真的不需要去插件里做类似的事情。

【讨论】：

.live 直到 1.4 才支持所有事件