Résolution des problèmes JQuery Cibles d'événement

Question

J'essaie de créer un gestionnaire universel pour mes boutons, mais le code suivant ne semble pas reconnaître les cibles d'événement, et crache à la place le target.toString() == le URL de la page en cours?

html:

<a id="button1" href="#"></a> 
<a id="button2" href="#"></a> 

jquery/javascript:

function myHandler(e) { 

    if (e.target == $("#button1")) 
     alert("Button 1 clicked"); 
    else if (e.target == $("#button2")) 
     alert("Button 2 clicked"); 
    else 
     alert(e.target.toString()); 
} 

$("#button1").click(myHandler); 
$("#button2").click(myHandler); 

Answer 1

function myHandler(e) { 

    if (e.target.id == "button1") 
     alert("Button 1 clicked"); 
    else if (e.target.id == "button2") 
     alert("Button 2 clicked"); 
    else 
     alert(e.target.toString()); 
} 

$("#button1").click(myHandler); 
$("#button2").click(myHandler); 

votre code ne peut pas travailler parce que vous comparez l'événement cible avec un objet jQuery

Un exemple concret: http://jsfiddle.net/fcalderan/7b53z/

Answer 2

Deux problèmes avec votre code.

1. vous avez manqué le # pour les ids dans votre myHandler.
2. vous comparez éléments dom e.target avec des objets jquery $('..').

Utilisez

function myHandler(e) { 

    if (e.target == $("#button1")[0]) 
     alert("Button 1 clicked"); 
    else if (e.target == $("#button2")[0]) 
     alert("Button 2 clicked"); 
    else 
     alert(e.target.toString()); 
} 

Answer 3

J'ai créé une démo avec jsFiddle - here

et le code de la démo ci-dessous:

JavaScript:

$(document).ready(function(){ 

    function eventHandler(e){ 
    var clicked = $(e.target); 

    // will check if element is or is a child of event target   
    if (clicked.is('#btn1') || clicked.parents().is('#btn1')) 
     console.log("btn1 was clicked"); 
    else if(clicked.is('#btn2') || clicked.parents().is('#btn2')) 
     console.log("btn2 was clicked"); 
    } 

    $('#btn1').bind('click', function(e){ 
    eventHandler(e); 
    return false; 
    }); 

    $('#btn2').bind('click', function(e){ 
    eventHandler(e); 
    return false; 
    }); 

}); 

HTML:

<button id="btn1">Button #1</button> 
<button id="btn2">Button #2</button> 

Espérons que cela aide. Si vous avez besoin d'une version non-jQuery, faites-le moi savoir.