jquery livequery问题

时间:2009-04-11 02:52:17

标签: jquery

我动态加载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);
});

1 个答案:

答案 0 :(得分:2)

您正在使用ID作为类。查看所有这些问题,了解为什么这是一件坏事:

基本上,ID应该是唯一的。当你有一组东西(比如编辑链接)时,正确的分组方法就是用一个类。当你搜索#themeEdit时,jQuery将假设只有一个并返回第一个,因为它应该是它应该的样子。您需要为链接指定themeEdit,并将其搜索为.themeEdit

此外,jQuery 1.3内置了live功能,所以如果你使用它,真的没有必要去插件这样的东西。