jQuery - Anhängen eines Ereignis-Handlers an ein bereits vorhandenes Klick-Ereignis

Question

Ich habe ein Klick-Ereignis, das bereits definiert ist. Ich habe mich gefragt, was der beste Weg wäre, um ein anderes Ereignis-Handler zu diesem Ereignis ohne Berühren dieses Codes (wenn möglich) anhängen.

Gibt es eine Möglichkeit, einfach einen weiteren Ereignishandler an das bereits definierte Klickereignis anzuhängen?

Dies ist die aktuelle Klick-Ereignisdefinition:

 $(".HwYesButton", "#HwQuizQuestions")
        .append("<a href='javascript:void(0);' rel='.HwYesButton'>Yes</a>")
        .click(function(event) {
            var button = $(this).parent();
            var questionId = button.attr('id');
            $iadp.decisionPoint["HwQuizYourself"].Input.inputProvided(questionId);
            button.find(".HwNoButton").removeClass("HwButtonSelected");
            $(this).addClass("HwButtonSelected");
            button.removeClass("HwQuestionSkipped");

            $iadp.flat.setBoolean(questionId, true);
            return false;
        });

Answer 1

Das Einzige, was Sie tun können, ist, einen weiteren (zusätzlichen) Handler anzuhängen:

$(".HwYesButton", "#HwQuizQuestions").click(function() {
    // something else
});

jQuery ruft die Handler in der Reihenfolge auf, in der sie mit dem Element verbunden wurden.

Sie können den bereits definierten Handler nicht "erweitern".

---

Übrigens ist Ihre Formulierung etwas ungenau. Sie definieren nicht eine Klick-Ereignis . Sie befestigen nur Klick-Ereignis Handler . Das Klick-Ereignis wird vom Browser erzeugt, wenn der Benutzer auf ein Element klickt.

Sie können so viele Click-Handler für ein Element haben, wie Sie wollen. Vielleicht sind Sie dies von einfachem JavaScript gewohnt:

element.onclick = function() {}

Mit dieser Methode können Sie tatsächlich nur einen Handler anhängen. Aber JavaScript bietet einige fortgeschrittene Methoden zur Ereignisbehandlung von dem ich annehme, dass jQuery davon Gebrauch macht.

Answer 2

Ich weiß, dies ist ein alter Beitrag, aber vielleicht kann dies noch jemandem helfen, da ich bei meiner Suche immer noch über diese Frage stolpern konnte...

Ich versuche, die gleiche Art von Sache zu tun, außer ich möchte meine Aktion VOR den bestehenden Inline onClick-Ereignisse auslösen. Dies ist, was ich bisher getan habe und es scheint zu funktionieren ok nach meinen ersten Tests. Es wird wahrscheinlich nicht behandeln Ereignisse, die nicht inline, wie die von anderen Javascipt gebunden sind.

        $(function() {
            $("[onClick]").each(function(){
                var x = $(this).attr("onClick");
                $(this).removeAttr("onClick").unbind("click");
                $(this).click(function(e){
                    // do what you want here...
                    eval(x); // do original action here...
                });
            });
        });

Answer 3

Sie können einfach ein weiteres Klick-Ereignis für dasselbe schreiben und beide werden ausgelöst. Siehe es aquí

<a id="clickme">clickme</a>
<script>
    $('#clickme').click(function () {
        alert('first click handler triggered');
    });
    $('#clickme').click(function () {
        alert('second click handler triggered');
    });
</script>

Answer 4

Ajax kann die Angelegenheit hier verkomplizieren. Wenn Sie zwei Ereignisse aufrufen, von denen das erste ein Ajax-Aufruf ist, dann wird das zweite Ereignis wahrscheinlich ausgelöst, bevor die Antwort zurückkommt.

Auch wenn die Ereignisse in der richtigen Reihenfolge abgefeuert werden, müssen Sie in die Callback-Funktion im Ajax-Aufruf gelangen.

Es ist schwierig, dies zu tun, ohne den ursprünglichen Code zu bearbeiten.

Answer 5

Ja, das können Sie. Nehmen wir an, ich habe eine Tag-Cloud, und wenn ich auf ein Tag klicke, wird das Tag standardmäßig entfernt. Etwas wie:

<div class="tags">
  <div class="tag">Tag 1</div>
  <div class="tag">Tag 2</div>
</div>

<script>
$(document).ready(function(){
  $('.tag').click(function(e){
    e.preventDefault();
    $(this).fadeOut('slow',function(){
      $(this).remove();
    });
    return false;
  });
});
</script>

Nehmen wir nun an, dass dies in einer mitgelieferten Bibliothek für ein Projekt gebündelt ist, aber Sie möchten eine entwicklerfreundliche Möglichkeit bieten, diese Klick-Ereignisse abzufangen und dem Benutzer einen AYS-Dialog (Are You Sure?) anzuzeigen. In Ihrem Kopf denken Sie vielleicht so etwas wie:

<script>
$(document).ready(function(){
  $('.tag').beforeRemove(function(){
    if (AYS() === false) {
      return false; // don't allow the removal
    }
    return true; // allow the removal
  });
});
</script>

Die Lösung wäre also folgende:

<div class="tags">
  <div class="tag">Tag 1</div>
  <div class="tag">Tag 2</div>
</div>

<script><!-- included library script -->
$(document).ready(function(){

  $.fn.beforeRemove = $.fn.click;

  $('BODY').on('click','.tag',function(e){
    e.preventDefault();
    console.log('debug: called standard click event');
    $(this).fadeOut('slow',function(){
      $(this).remove();
    });
    return false;
  });
});
</script>

<script><!-- included in your page, after the library is loaded -->
$(document).ready(function(){

  $('.tag').beforeRemove(function(){
    var sWhich = $(this).text();
    console.log('debug: before remove - ' + sWhich);
    return false; // simulate AYS response was no
    // change return false to true to simulate AYS response was yes
  });

});

</script>

In diesem Beispiel besteht der Trick darin, dass wir jQuery mit einer beforeRemove Trigger, der ein Duplikat des click Auslöser. Als Nächstes wird die Bibliothek durch die Verwendung der $('BODY').on('click','.tag',function(e){...}); Handler, haben wir ihn verzögert und rufen nach unserer Seite beforeRemove abgefeuert. Daher könnten wir Folgendes zurückgeben false en beforeRemove wenn wir eine negative AYS-Bedingung haben und daher nicht zulassen, dass die click Ereignis fortzusetzen.

Führen Sie also die obige Funktion aus, und Sie werden sehen, dass Klicks auf die Tags das Element nicht entfernen. Schalten Sie nun die beforeRemove Funktion zur Rückgabe true (wie bei einer positiven Antwort auf eine AYS-Aufforderung), und die click Ereignis darf fortgesetzt werden. Sie haben einen Ereignishandler an ein bereits bestehendes Ereignis angehängt click Veranstaltung.