2009-09-03 10 views
15

Eine Funktion ist für viele Objekte an ein Ereignis gebunden. Eines dieser Objekte löst das Ereignis aus, und jQuery tritt ein. Wie finde ich heraus, wer das Ereignis innerhalb der JavaScript-Funktion ausgelöst hat?Informationen über die Quelle eines Ereignisses mit jQuery abrufen

Ich habe versucht mit function [name](event){} und stoßen bei Ereignis, aber ich bekomme "'Daten' ist Null oder kein Objekt".

Hier ist mein Code jetzt:

<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

möglich Duplikat [Abrufen der ID des Elements, das ein Ereignis mit JQuery gefeuert] (http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that- fire-an-event-using-jquery –

Antwort

0

Hier ist ein funktionierendes Beispiel für eine komplette Seite. Der Anrufer wird an die Konsole in der Zeile protokolliert 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

Sie brauchen nicht jQuery überhaupt das Ziel eines Ereignisses zu erhalten. Es ist immer als currentTarget -Eigenschaft des Ereignisses verfügbar. Sie können natürlich jQuery verwenden, um den Ereignishandler einzurichten, aber das Ziel einfach zu erreichen, ohne diese Bibliothek zu verwenden. Zum Beispiel:

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

Wie für den Umgang mit ‚Null‘, wenn sie versuchen event.data zuzugreifen, die absolut Sinn macht, weil ‚Daten‘ nicht eine Eigenschaft eines Click-Ereignis ist.

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

Sie können entweder eine andere Eigenschaft auf das Datenobjekt hinzufügen, etwa so:

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

Oder Sie eine weitere Variable in Ihre Funktion übergeben können:

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

target Verwendung können Sie auf das Steuerelement, das die aktuelle Ausführung/das aktuelle Ereignis verursacht hat. Wie folgt aus:

$(event.target) 
0

wenn Sie heften sich die Veranstaltung auf mehrere Objekte der beste Weg, um herauszufinden, welche der Elemente das Ereignis ausgelöst wird, um die dieses Schlüsselwort. Beispiel -

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

lassen Sie mich wissen, wenn dies hilft.

1

Sie können die diese in Jquery-Funktion verwenden, wird es Ihnen das Element, das Ereignis injiziert hat.

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