html div evento onclick

Question

Ho un div html sulla mia pagina jsp, il che ho messo un tag di ancoraggio, si prega di trovare il codice di seguito per questo, il codice

<div class="expandable-panel-heading"> 
    <h2> 
     <a id="ancherComplaint" href="#addComplaint" 
          onclick="markActiveLink(this);">ABC</a> 
    </h2> 
</div> 

js

$('.expandable-panel-heading:not(#ancherComplaint)').click(function() { 
    alert('123'); 
}); 

function markActiveLink(el) { 
    alert($(el).attr("id")); 
} 

qui Io quando clicco su div ho ricevuto un avviso con il messaggio 123, è corretto ma quando clicco su ABC Desidero messaggio Voglio chiamare il metodo markActiveLink.

JSFiddle

Cosa c'è di sbagliato con il mio codice? per favore aiutatemi.

Answer 1

Il problema era che facendo clic su ancora l'ancora ha attivato un clic su . Si chiama "event bubbling".

In realtà, ci sono più soluzioni:

• il check-in del gestore di eventi DIV click se l'elemento obiettivo reale era l'ancora
  → jsFiddle

  $('.expandable-panel-heading').click(function (evt) { 
      if (evt.target.tagName != "A") { 
       alert('123'); 
      } 
  
      // Also possible if conditions: 
      // - evt.target.id != "ancherComplaint" 
      // - !$(evt.target).is("#ancherComplaint") 
  }); 
  
  $("#ancherComplaint").click(function() { 
      alert($(this).attr("id")); 
  }); 
  

• Fermare la propagazione evento dal l'ancora click listener
  → jsFiddle

  $("#ancherComplaint").click(function (evt) { 
      evt.stopPropagation(); 
      alert($(this).attr("id")); 
  }); 
  

---

Come avrete notato, ho rimosso la parte seguente del selettore dai miei esempi:

:not(#ancherComplaint) 

Questa era inutile perché non v'è alcun elemento con la classe .expandable-panel-heading che hanno anche #ancherComplaint come suo ID.

Suppongo che tu volessi sopprimere l'evento per l'ancora. Questo non può funzionare in questo modo perché entrambi i selettori (il tuo e il mio) selezionano esattamente lo stesso DIV. Il selettore non ha alcuna influenza sull'ascoltatore quando viene chiamato; imposta solo la lista di elementi a cui gli ascoltatori devono essere registrati. Poiché questa lista è la stessa in entrambe le versioni, non vi è alcuna differenza.

Answer 2

avete bisogno di leggere su spumeggiante evento e di sicuro rimuovere in linea di gestione degli eventi, se si dispone di jQuery comunque

prova il clic sul div ed esaminare il bersaglio

Live Demo

$(".expandable-panel-heading").on("click",function (e) { 
    if (e.target.id =="ancherComplaint") { // or test the tag 
     e.preventDefault(); // or e.stopPropagation() 
     markActiveLink(e.target); 
    }  
    else alert('123'); 
}); 
function markActiveLink(el) { 
    alert(el.id); 
} 

Answer 3

Prova questo

$('.expandable-panel-heading:not(#ancherComplaint)').click(function() { 
    alert('123'); 
}); 

$('#ancherComplaint').click(function (event) { 
    alert($(this).attr("id")); 
    event.stopPropagation() 
}) 

DEMO

Answer 4

Prova seguente:

$('.expandable-panel-heading').click(function (e) { 
     if(e.target.nodeName == 'A'){ 
      markActiveLink(e.target) 
      return; 
     }else{ 
      alert('123'); 
     } 
}); 

function markActiveLink(el) { 
    alert($(el).attr("id")); 
} 

Ecco la demo di lavoro: http://jsfiddle.net/JVrNc/4/

Answer 5

modificare il codice jQuery con questo. Avverrà l'id della a.

$('.expandable-panel-heading:not(#ancherComplaint)').click(function() { 
markActiveLink();  
    alert('123'); 
}); 

function markActiveLink(el) { 
var el = $('a').attr("id") 
    alert(el); 
} 

Demo

Answer 6

avrei usato stopPropagation come questo:

$('.expandable-panel-heading:not(#ancherComplaint)').click(function() { 
    alert('123'); 
}); 

$('#ancherComplaint').on('click',function(e){ 
    e.stopPropagation(); 
    alert('hiiiiiiiiii'); 
}); 

Answer 7

provare questo esempio, l'onclick è ancora chiamato dal codice HTML, e spumeggiante evento viene arrestato.

<div class="expandable-panel-heading"> 
<h2> 
    <a id="ancherComplaint" href="#addComplaint" onclick="markActiveLink(this);event.stopPropagation();">ABC</a> 
</h2> 
</div> 

http://jsfiddle.net/NXML7/1/

Answer 8

mettere la vostra funzione di jQuery all'interno funzione pronti per la chiamata evento Click:

$(document).ready(function() { 

    $("#ancherComplaint").click(function() { 
    alert($(this).attr("id")); 
    }); 

}); 

Answer 9

ho un problema, voglio attraverso un onclick su un div o la chiusura di me ci sarò un altro, ma non prendo l'onclick. Sotto il codice in javascript:

<script type="text/javascript"> 
     function ocultar(){ 
     document.getElementById('ver').style.display = 'none';} 
    </script> 

e come lo chiamo io dal div

<div class="divCierre" onclick="ocultar()"></div>

Answer 10

quando click sul div allerta chiave

$(document).delegate(".searchbtn", "click", function() { 
     var key=$.trim($('#txtkey').val()); 
     alert(key); 
     });