problème jquery livequery

Question

je charge dynamiquement les éléments html .. et utilisé livequery() plugin pour gérer les événements de clic .. mais seul le premier élément a pu être cliqué.

voici mon DOM initial:

<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> 

voici mon code pour charger dynamiquement les éléments de 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>'); 

    }); 
} 

voici mon code pour l'événement, cliquez sur 'Edit':

$("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

Vous utilisez des ID en tant que classes. Consultez toutes ces questions pour lesquelles cela est une mauvaise chose:

• 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?

Essentiellement, ID doit être unique. Lorsque vous avez un ensemble de quelque chose (comme, disons, éditer des liens) la bonne façon de les grouper est avec une classe. Lorsque vous recherchez #themeEdit jQuery va supposer qu'il n'y en a qu'un seul et retourner le premier, parce que c'est comme ça que ça devrait être. Vous devez donner les liens classe de themeEdit et les rechercher comme .themeEdit.

En outre, jQuery 1.3 a la fonctionnalité live intégrée, donc si vous utilisez cela, il n'est pas vraiment nécessaire d'aller au plugin pour quelque chose comme ça.