web-dev-qa-db-fra.com

html div onclick event

J'ai un div HTML sur ma page JSP, sur ce que j'ai mis une balise d'ancrage, s'il vous plaît trouver le code ci-dessous pour cela,

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

code js

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

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

ici, lorsque je clique sur div, je reçois une alerte avec le message 123, tout va bien, mais lorsque je clique sur ABC je veux un message, je veux appeler la méthode markActiveLink.

JSFiddle

quel est le problème avec mon code? Sil te plait aide moi.

javascriptjqueryhtmlonclick
15
Anil Chavda

Le problème était que le fait de cliquer sur l'ancre a quand même déclenché un clic dans votre <div>. Cela s'appelle " événement bouillonnant ".

En fait, il existe plusieurs solutions:

  • Vérification dans le gestionnaire d'événements de clic DIV si l'élément cible réel était l'ancre
    → 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"));
});

  • Arrêt de la propagation d'événement à partir du listener de clic d'ancrage
    → jsFiddle

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

Comme vous l'avez peut-être remarqué, j'ai retiré de mon exemple la partie sélecteur suivante:

:not(#ancherComplaint)

Cela était inutile car il n'y a pas d'élément avec la classe .expandable-panel-heading qui ait aussi #ancherComplaint comme identifiant.

Je suppose que vous vouliez supprimer l'événement pour l'ancre. Cela ne peut pas fonctionner de cette manière car les deux sélecteurs (le vôtre et le mien) sélectionnent exactement le même DIV. Le sélecteur n'a aucune influence sur l'auditeur lorsqu'il est appelé. il ne fait que définir la liste des éléments auxquels les écouteurs doivent être enregistrés. Comme cette liste est la même dans les deux versions, il n’existe aucune différence.

18
ComFreek

Essaye ça

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

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

D&EACUTE;MO

2
Satpal

Essayez de suivre:

$('.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"));
}

Voici la démo de travail: http://jsfiddle.net/JVrNc/4/

2
Nishu Tayal

Changez votre code jQuery avec ceci. Il va alerter l'id de l'a.

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

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

Démo

2
Ari Susanto

Vous devez lire sur l'événement bouillonnant et bien sûr supprimer la gestion des événements en ligne si vous avez quand même jQuery

Testez le clic sur la div et examinez la cible

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);
}
1
mplungjan

J'aurais utilisé stopPropagation comme ceci:

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

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

Essayez cet exemple, onclick est toujours appelé depuis votre code HTML et la diffusion d'événements est arrêtée. 

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

0
ER144

placez votre fonction jquery dans la fonction ready pour l'événement click de l'appel

$(document).ready(function() {

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

});
0
borchvm

lorsque vous cliquez sur la touche d'alerte div 

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