Obtenir des informations sur la source d'un événement avec jQuery

Une fonction est liée à un événement pour de nombreux objets. L'un de ces objets déclenche l'événement et jQuery coups de pied dans. Comment puis-je savoir qui a déclenché l'événement à l'intérieur de la fonction JavaScript?

J'ai essayé d'utiliser function [name](event){} et la piquer à l'événement, mais j'obtiens un "data' a la valeur null ou n'est pas un objet".

Voici mon code maintenant:

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

source d'informationauteur Zian Choy

javascript-events jquery

Vous pouvez utiliser le ce en fonction Jquery, il vous donnera l'élément qui a injecté de l'événement.

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

Voici un exemple de travail d'une page complète. L'appelant est connecté à la console dans la ligne 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>

Vous n'avez pas besoin de jQuery à tout pour obtenir la cible d'un événement. Il est toujours disponible sur la propriété currentTarget de l'événement. Vous pouvez utiliser jQuery pour configurer le gestionnaire d'événements, bien sûr, mais l'obtention de la cible est facile à faire sans l'aide de la bibliothèque. Par exemple:

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

Que pour traiter avec 'null', en essayant d'accéder à l'événement.les données, qui est parfaitement logique parce que les "données" n'est pas une propriété d'un événement de clic.

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

Vous pouvez soit ajouter une autre propriété de l'objet de données comme suit:

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

Ou, vous pouvez passer à une autre variable pour votre fonction:

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

0

À l'aide de target vous pouvez accéder au contrôle qui a causé l'exécution en cours/l'événement. Comme ceci:
```
$(event.target)
```

lorsque vous attachez le cas de plusieurs objets à la meilleure façon d'identifier les éléments qui a déclenché l'événement est à l'aide de la ce mot-clé. Exemple -

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

laissez-moi savoir si cela aide.

Vous devez vous connecter pour publier un commentaire.