2009-09-03 14 views
15

Una funzione è associata a un evento per molti oggetti. Uno di questi oggetti lancia l'evento e jQuery entra in gioco. Come faccio a sapere chi ha attivato l'evento all'interno della funzione JavaScript?Ottieni informazioni sull'origine di un evento con jQuery

Ho provato a utilizzare function [name](event){} ea dare un'occhiata all'evento ma ottengo che "i dati" sono nulli o non sono un oggetto ".

Ecco il mio codice in questo momento:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.opening').bind("click", function(event) { 
     //code to populate event.data since right now, the tags don't hold the info...they will eventually with an XHTML custom namespace 
      event.data.building = "Student Center"; 
      event.data.room = "Pacific Ballroom A"; 
      event.data.s_time = "9/15/2009 8:00"; 
      event.data.e_time = "9/15/2009 10:00"; 

      indicatePreferenceByClick(event); 
     }); 
    function indicatePreferenceByClick(event) { 
     alert("I got clicked and all I got was this alert box."); 
     $("#left").load("../ReserveSpace/PreferenceByClick", { building: event.data.building, room: event.data.room, s_time: event.data.s_time, e_time: event.data.e_time}); 
    }; 
</script> 
+4

possibile duplicato [Ottenere l'ID dell'elemento che ha attivato un evento utilizzando jQuery] (http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that- sparato-un-evento-con-jQuery) –

risposta

0

Ecco un esempio di lavoro di una pagina completa. Il chiamante viene registrato alla console della linea console.log($caller.prop("id"));:

<!DOCTYPE html> 
<html> 

<head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <title>Untitled 1</title> 
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
        $('.opening').on("click", {building:"Student Center", room:"Pacific Ballroom A", s_time:"9/15/2009 8:00", e_time:"9/15/2009 10:00"}, function(event) { 
         indicatePreferenceByClick(event); 
        }); 

        function indicatePreferenceByClick(event) { 
         alert("I got clicked and all I got was this alert box."); 
         var $caller = $(event.target); 
         console.log($caller.prop("id")); 
         var building = event.data.building; 
         var room = event.data.room; 
         var s_time = event.data.s_time; 
         var e_time = event.data.e_time; 
        }; 
     }); 
    </script> 
</head> 

<body> 
<div style="padding:10px"><button type="button" id="button1" class="opening">button1</button></div> 
<div style="padding:10px"><button type="button" id="button2" class="opening">button2</button></div> 
</body> 

</html> 
0

Non hai bisogno di jQuery affatto per ottenere l'obiettivo di un evento. È sempre disponibile come proprietà currentTarget dell'evento. È possibile utilizzare jQuery per impostare il gestore di eventi, ovviamente, ma ottenere facilmente la destinazione senza utilizzare quella libreria. Per esempio:

<!DOCTYPE html> 
    <html> 
     <head> 
      <script type="text/javascript" src="jquery.js"></script> 
     </head> 
     <body> 

      <button type="button" id="button1" class="opening">button1</button> 
      <button type="button" id="button2" class="opening">button2</button> 

      <script type="text/javascript"> 
       $(document).ready(function() { 
        $('.opening').bind("click", function(event) { 
         indicatePreferenceByClick(event); 
        }); 
       }); 

       function indicatePreferenceByClick(event) { 
        console.log('target', event.currentTarget); 
       } 
      </script> 

     </body> 
    </html> 

Quanto a che fare con 'null' quando si cerca di accedere a event.data, che ha perfettamente senso, perché 'dati' non è una proprietà di un evento click.

$(document).ready(function() { 
     $('.opening').bind("click", function(event) { 
      // event.data is null so you can't add properties to it 
      event.data.building = "Student Center"; // <- this will fail 
      indicatePreferenceByClick(event); 
     }); 
    }); 

è possibile aggiungere un'altra proprietà per l'oggetto di dati in questo modo:

$(document).ready(function() { 
     $('.opening').bind("click", function(event) { 
      event.data = {}; 
      event.data.building = "Student Center"; 
      indicatePreferenceByClick(event); 
     }); 
    }); 

In alternativa, è possibile passare un'altra variabile alla funzione:

$(document).ready(function() { 
     $('.opening').bind("click", function(event) { 
      var data = {}; 
      data.building = "Student Center"; 
      indicatePreferenceByClick(event, data); 
     }); 
    }); 
0

Usando target è possibile accedere il controllo che ha causato l'esecuzione/evento corrente. Come questo:

$(event.target) 
0

quando si collega l'evento a più oggetti il ​​modo migliore per identificare quale degli elementi ha generato l'evento sta usando la parola questo. Esempio -

$('.opening').bind("click", function(event) { 

    var current = $(this); // will give you who fired the event. 

    //code to populate event.data since right now, the tags don't hold the info...they will eventually with an XHTML custom namespace 
     event.data.building = "Student Center"; 
     event.data.room = "Pacific Ballroom A"; 
     event.data.s_time = "9/15/2009 8:00"; 
     event.data.e_time = "9/15/2009 10:00"; 

     indicatePreferenceByClick(event); 
    }); 

fammi sapere se questo aiuta.

1

È possibile utilizzare il questo in funzione Jquery, esso vi darà l'elemento che ha iniettato l'evento.

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.opening').bind("click", function(event) { 
     console.log($(this)); 
    }); 
});  
</script>