jquery Funktion wird zu oft genannt auch nach $ (dies muss)

Question

Mit JSON-Daten von Ajax-Erfolg Ereignis erhielt ich diese Daten verwenden, dynamische HTML-Materialien zu machen, so etwas wie dieses

function loop_json(data) { 
    var response_data = jQuery.parseJSON(data); 
    var vip_userId = $('#userId').val(); 
    $(response_data.vip_poll).each(function(index, value) { 
     var t= ''; 
     t += '<li class="vip-polls-holder" id="'+value.id+'">'; 
     t += '<div class="user-img">'; 
     t += '<a href="users.php?user_name='+response_data.vip_pollOwners[index].user_name+'"><img src="'+response_data.vip_pollOwners[index].user_avatar+'" class="user-img-pic img-circle" /></a>'; 
     t += '</div>'; 
... 
t +='</li>'; 
$('.vip-polls-holder-ul-mainDIV').append(t); 
// And so I attach some functions with these li boxes such as 
function1(); 
function2(); //and 
VIP_dNd_multiple(); 
    }); 
} 

Wo VIP_dNd_multiple() ist ->

function VIP_dNd_multiple() { 

// let it be called part a 
$trashVIP.each(function() { 
    $(this).droppable({ 
     accept: "#VIPgalleryMulitple"+$(this).attr('id')+" > li", 
     activeClass: "ui-state-highlight", 
     drop: function (event, ui) { 
      console.log('abc'); //This prints one time 
     } 
    }); 
}); 

// let it be called part b 
$("ul.VIPgalleryMulitple > li").each(function() { 

     var $item = $(this); 
     $item.click(function (event) { 
      event.preventDefault(); 
      console.log('ok'); //This prints multiple times 
     }); 
    }); 
} 

Das Problem ist VIP_dNd_multiple() wird so oft genannt, da es li Elemente auf DOM vorhanden sind und somit Konsole gibt ‚ok‘ (Teil b der Funktion) als Ausgangs mehrere Male, was unerwünscht ist, Na sicher. Ich verstehe nicht, wenn ich Click-Ereignis auf $ (this) li verwenden, warum alle li-Elemente console.log Aktion auslösen?
Überraschenderweise gibt Teil a der gleichen Funktion Konsole nur einmal korrekt aus.

Answer 1

Ich weiß nicht, ob es für diesen helfen kann, aber dieser Code rettet mir oft für mehrere Ereignis verhindern:

$item.click(function (event) { 
    event.preventDefault(); 
    if (event.handled !== true) { 
     event.handled = true; 
     //Your stuff 
     console.log("ok"); 
    } 
}) 

Answer 2

Was ist der Wert von $TrashVIP? Es sieht so aus, als würde es die LI-Items nicht übergeben, sondern es liest nur das UL-Item, das nur eins ist, deshalb wird es einmal gedruckt.

Die zweite Funktion ruft jedes LI-Element auf. Wenn Sie also 10 LI-Elemente haben und auf eines der LI klicken, passiert es tatsächlich die Schleife und rendert das OK so oft.

Es scheint mir, Sie brauchen nicht wirklich die zweite each Funktion, sondern nur die click Funktion wie sie ist, und es wird bereits ausgelöst, sobald eine der LI-Artikel angeklickt wird.

$("ul.VIPgalleryMulitple > li").click(function() { 
    event.preventDefault(); 
    console.log("ok"); 
}); 

Sample Fiddle

Answer 3

I entfernt $ .each Funktion, wie es vielleicht die Wurzel des Problems war. Stattdessen wechselte ich auf 'on' Methode. Außerdem habe ich die ID des Ankerelements nach dem ersten Klick entfernt, um weitere Ereignisse nach dem ersten Klick zu verwerfen. Meine endgültige Lösung kombiniert A. Rossi Antwort ->

$("ul.VIPgalleryMulitple > li").on('click', function (event) { 

     if (event.handled !== true) { 
      event.handled = true; 

      var $item = $(this), 

      var ids = $(this).attr('id'); 

      console.log('ok'); 

      $(this).find('a').removeAttr('id'); 
     } 
     return false; 
    });