wake-up-neo.net

html div onclick event

Ich habe ein HTML-Div auf meiner JSP-Seite, auf das ich einen Anker-Tag gesetzt habe. Code dazu finden Sie unten.

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

js code

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

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

hier habe ich, wenn ich auf div klicke, Alarm mit 123-Nachricht erhalten, es ist in Ordnung, aber wenn ich auf ABC klicke, möchte ich, dass ich die markActiveLink-Methode aufrufen möchte.

JSFiddle

was stimmt nicht mit meinem Code? bitte hilf mir.

javascriptjqueryhtmlonclick
15
Anil Chavda

Das Problem war, dass das Klicken auf den Anker immer noch einen Klick in Ihrem <div> auslöste. Das heißt " Event Bubbling ".

In der Tat gibt es mehrere Lösungen:

  • Überprüfen Sie im DIV-Click-Ereignishandler, ob das eigentliche Zielelement der Anker war
    → 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"));
});

  • Stoppen der Weitergabe von Ereignissen vom Anker-Klicklistener
    → jsFiddle

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

Wie Sie vielleicht bemerkt haben, habe ich den folgenden Auswahlteil aus meinen Beispielen entfernt:

:not(#ancherComplaint)

Dies war unnötig, da es kein Element mit der Klasse .expandable-panel-heading gibt, das auch #ancherComplaint als ID hat.

Ich gehe davon aus, dass Sie das Ereignis für den Anker unterdrücken wollten. Das kann auf diese Weise nicht funktionieren, da beide Selektoren (deins und meins) genau denselben DIV auswählen. Der Selektor hat keinen Einfluss auf den Listener, wenn er aufgerufen wird. es legt nur die Liste der Elemente fest, für die die Listener registriert werden sollen. Da diese Liste in beiden Versionen gleich ist, besteht kein Unterschied.

18
ComFreek

Versuche dies

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

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

DEMO

2
Satpal

Versuchen Sie folgendes:

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

Hier ist die Arbeitsdemo: http://jsfiddle.net/JVrNc/4/

2
Nishu Tayal

Ändern Sie Ihren jQuery-Code damit. Es wird die ID des a alarmiert.

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

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

Demo

2
Ari Susanto

Sie müssen sich über das Sprudeln von Ereignissen informieren und auf jeden Fall die Inline-Ereignisbehandlung entfernen, wenn Sie trotzdem über jQuery verfügen

Testen Sie den Klick auf das Div und untersuchen Sie das Ziel

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

Ich hätte stopPropagation so benutzt:

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

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

Probieren Sie dieses Beispiel aus, der Onclick wird immer noch aus Ihrem HTML-Code aufgerufen und das Bubbling von Ereignissen wird gestoppt. 

<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

fügen Sie Ihre Jquery-Funktion in die Ready-Funktion für das Click-Click-Ereignis ein:

$(document).ready(function() {

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

});
0
borchvm

wenn Sie auf den Div-Alert-Schlüssel klicken 

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