jquery livequery問題

Question

我動態加載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>'); 

    }); 
} 

這裏是我的 '編輯' click事件代碼：

$("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); 
}); 

Answer 1

您正在使用ID作爲類。看看所有這些問題，爲什麼這是一件壞事：

• CSS: are class and id interchangeable?
• Cascading style sheets use 「id」 or 「class」
• CSS: div id VS. div class
• div class vs id
• CSS Best Practice about ID and Class?

從本質上講，ID應該是唯一的。當你有一組東西時（比如說編輯鏈接），將它們分組的一種正確的方法是使用一個類。當您搜索#themeEdit時，jQuery將假定只有一個返回第一個，因爲這應該是。您需要提供類別的themeEdit的鏈接並將它們搜索爲.themeEdit。

此外，jQuery 1.3內置了live的功能，所以如果你使用的是這樣的話，那麼就沒有必要去插件了。