jquery charger en utilisant l'ID de l'élément

Question

Je suis désolé si c'est un peu clair, mais j'ai des problèmes pour conceptualiser ce que je veux faire.

J'utilise une liste de années div comme si

<div id="1" class="ajax_category"> 
    <p> Blah </p> 
    </div> 

Il y a un javascript mis à faire une demande de paiement ajax à une URL lorsque le div id est cliqué. Cela fonctionne bien, mais je dois me répéter pour chaque div sur la page. Voici l'extrait de code javascript ...

$('#1').bind('pageAnimationEnd', function(e, ajax_item_1){ 
if (!$(this).data('loaded')) { 
    $(this).append($('<div><img class="loading" src="../../img/loading.gif"><div>'). 
     load('ajax/load_item/1 #ajax_item_1', function() { 
     $(this).parent().data('loaded', true); 
     })); 
     } 
    }); 

Je souhaite modifier en quelque sorte ce script pour être déclenché par un clic de la classe de div puis ajouter le div de chargement à l'ID de ce div. Saisissez l'identifiant div et faites la requête ajax en référençant l'identifiant div dans l'URL jq 'load'.

S'il vous plaît laissez-moi savoir si cela n'est pas clair ou si vous avez d'autres questions.

Merci, Peter

Answer 1

Bind à "div.ajax_category" à la place. Ensuite, utilisez l'ID de l'élément que vous obtenez dans les arguments d'événement. Créer les chaînes dont vous avez besoin quelque chose comme ceci:

var toLoad = "ajax/load_item/" + elementId + " #ajax_item_" + elementId; 

Vous pouvez également faire mieux avec l'événement « délégué » nouvelle manipulation dans jquery. Cela évite beaucoup de coûts associés à l'appel de "bind" sur de nombreux éléments.

Answer 2

Vous devriez être en mesure de le faire en utilisant delegate:

$('#container').delegate('.ajax_category','click',function(){ 
    if (!$(this).data('loaded')) { 
     $(this).append(
      $('<div><img class="loading" src="../../img/loading.gif"><div>') 
       .load(
        'ajax/load_item/' + this.id + ' #ajax_item_' + this.id, 
        function() { 
         $(this).parent().data('loaded', true); 
        } 
       ) 
     ); 
    } 
}); 

Notez que cela suppose que vos éléments avec la classe ajax_category sont enveloppés dans un div avec l'id container.

Cela présente un avantage significatif en termes de performances par rapport à ajax_category lui-même car il implique uniquement une liaison plutôt que plusieurs. La liaison est relativement coûteuse en termes de performance.