jQuery come eseguire l'evento solo sull'elemento interno

Question

C'è un modo per lasciare che l'elemento interno di un compia qualcosa?

Ho elementi di elenco che possono contenere tag a con una determinata classe.

I tag interni a sono associati a un gestore eventi in tempo reale. Gli elementi della lista hanno anche un gestore di eventi click.

Qualcosa di simile

<li>some text<a class="someClassName">some text</a></li> 

con il gestore per i a tag

$('#somelist li a').live("click", function(e) 

e questo è come viene aggiunto l'evento per la voce li

$(markers).each(function(i,marker){ 
    $("<li />") 
    .html("Locatie "+'<a class="ol id"><strong>'+ids[i]+'</strong></a>') 
    .click(function(e){ 
      showLocation(marker, i); 
    }) 
    .appendTo("#somelist "); 

Answer 1

Il metodo live in jQuery funziona tramite la delega degli eventi, che è l'atto di catturare tutti gli eventi bubbled dai singoli elementi su un antenato comune (nel caso specifico è document).

L'interruzione della propagazione/bubbling dell'evento click si verifica sull'elemento gestore (che è l'antenato comune, non sull'elemento stesso) ed esiste molto al di sopra dello li che si sta tentando di evitare.

Quindi, quando viene chiamato il metodo stopPropagation, abbiamo già attraversato il dominio e superato l'elemento li.

Si tratta essenzialmente di mettere un segnale di stop 200ft dopo l'intersezione.

Quindi è necessario utilizzare bind e stopPropagation o trovare una soluzione diversa.

Ecco un esempio di cosa sto parlando: http://jsbin.com/ibuxo (controllare la console)

si può vedere il codice o modificarlo in http://jsbin.com/ibuxo/edit

La mia proposta di soluzione a questo problema potrebbe essere quella di utilizzare bind anziché live.

Questo richiede di fare un po 'di lavoro in più, ma non è così male.

Probabilmente stai usando live perché stai aggiungendo nuovi elementi e vuoi che abbiano la stessa funzionalità. Dovresti farlo legandoli quando li inserisci nella pagina. Ecco un esempio

$(function(){ 
    var myAnchorHandler = function(e){ 
    alert('clicked!'); 
    e.stopPropagation(); 
    return false; 
    }; 

    // initial bind 
    $('#somelist li a').click(myAnchorHandler); 

    // code where you input more li elements to the list with links 
    $('#somelist').append(
    // bind your function to the element now, and then append it 
    $('<li><a>hi</a></li>').find('a').click(myAnchorHandler).parent() 
); 
}); 

Answer 2

Avere il gestore per i tag <a> restituiscono false.

Answer 3

Soluzione da Autore:

ho aggiunto tutti i tag a come sopra, in modo che nessun disguido con vivo più.

$(markers).each(function(i,marker){ 
    listitem = $("<li />") 
    .html("Location ") 
    .click(function(e){ 
     showLocation(marker, i); 
    }) 
    .appendTo("#somelist"); 
    $("<a />") 
    .html("<strong>"+ids[i]+"</strong>") 
    .addClass('ol id') 
    .click(function(){ 
     $('#ginfo').show(); 
     return false; 
    }) 
    .appendTo(listitem); 

Ecco una pagina interessante per spiegare spumeggiante evento: How to stop event bubbling with jquery live?