Deaktivieren Sie das Klickenereignis mit JQuery

Question

Meine Frage bezieht sich auf das Deaktivieren von Links/Klick -Ereignissen mit JQuery, und es ist wahrscheinlich einfacher als es mir scheint. Ich habe den wichtigen Code kommentiert, um es einfacher zu machen.

Ich habe den folgenden Code in einer .js -Datei:

$('.delete-answer').click(function(event) {
    event.preventDefault();

    // some actions modifying the tags    
    $('.output').closest('li').remove();
    var idMsg = ...;
    var action = ...;
    var answers = ...;
    $(this).closest('li').children('p').remove();
    $(this).closest('.tr').before('<tr><td><div class="output">Deleting message...</div></td></tr>');
    $(this).closest('.tr').remove();

    // While the servlet is deleting the message, I want to disable the links
    // but I can't, so my problem is just here

    // METHOD 1
    //$('a').unbind('click');

    // METHOD 2
    //$('a').bind('click', function(e){
    //    e.preventDefault();
    //});

    $.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { 
    });

    // METHOD 1
    //$('a').bind('click');

    // METHOD 2
    //$('a').unbind('click');

    $('.output').empty();
    $('.output').append('Message deleted successfully.');

});

Und in meinem HTML habe ich einige Listenelemente wie diese:

<li>
    <p class="text">Some text.</p>
    <table class="answer-details" style="width: 100%">
    <tbody>
        <tr class="tr">
            <td style="width: 50%;">
                <div class="msg-modification" display="inline" align="right">
                    <a id="modify" class="delete-answer" href="#">Delete</a>
                </div>
            </td>
        </tr>                               
    </tbody>
    </table>
</li>

Wie Sie sehen können, habe ich zwei Methoden ausprobiert, um das Klickereignis zu deaktivieren:

Methode 1: Ich habe die folgende Methode ausprobiert: wie man alle Ereignisse mit JQuery entbunt

Ergebnis: Es funktioniert und entbehrt das Klickereignis von den Ankern mit Delete-Antwort-Klasse, aber:

1) Es deaktiviert die Anker nur mit Löschen-Antwortenklasse. Ich werde es vorziehen, zu deaktivieren alle Links, während das Servlet es tut, ist Sachen.

2) Ich kann die Links nicht (oder ich weiß nicht, wie ich nicht weiß).

Methode 2: Ich habe die folgende Methode ausprobiert: Wie aktiviere/deaktiviere ich Links mit JQuery dynamisch?

Ergebnis: Es funktioniert für normale Anker, jedoch nicht für die Anker mit Klassenlöschungen.

Beide scheinen unvereinbar, also würde ich Ja wirklich Schätzen Sie etwas Hilfe.

---

Hinweis: Außerdem hat versucht, die Klasse zu ändern, die dies tun: $('.delete-answer').addClass('delete-disabled').removeClass('delete-answer');

Es ändert die Klasse und lässt die Anker nur mit löschlichem Unterricht. Wenn ich sie erneut klicke, löschen sie die Nachricht immer noch und ich weiß nicht warum:/

Answer 1

Wickeln Sie den gesamten Code in eine Funktion ein und verwenden Sie ein Flag.

1. Fügen Sie dies oben hinzu:

   (function() {
   

2. Fügen Sie dies unten hinzu:

   })();
   

3. Fügen Sie direkt unter der oberen Zeile oben hinzu:

   // Flag for whether "delete answer" is enabled
   var deleteAnswerEnabled = true;
   

4. In Ihrem Klickhandler oben oben:

   if (!deleteAnswerEnabled) {
       return false;
   }
   

5. Ändere dein post zu:

   // Disable deleting answers while we're doing it
   deleteAnswerEnabled = false;
   $.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { 
        // Enable it again now we're done
       deleteAnswerEnabled = true;
   });
   

Das alles zusammenbringen:

// (1)
(function() {
    // (3)
    // Flag for whether "delete answer" is enabled
    var deleteAnswerEnabled = true;


    $('.delete-answer').click(function(event) {
        event.preventDefault();

        // (4)
        // Don't do it if we're disabled
        if (!deleteAnswerEnabled) {
            return false;
        }

        // some actions modifying the tags    
        $('.output').closest('li').remove();
        var idMsg = ...;
        var action = ...;
        var answers = ...;
        $(this).closest('li').children('p').remove();
        $(this).closest('.tr').before('<tr><td><div class="output">Deleting message...</div></td></tr>');
        $(this).closest('.tr').remove();

        // (5)
        // Disable deleting answers while we're doing it
        deleteAnswerEnabled = false;
        $.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { 
             // Enable it again now we're done
            deleteAnswerEnabled = true;
        });

        $('.output').empty();
        $('.output').append('Message deleted successfully.');

    });
// (2)
})();

Wenn Sie sich ausreichend paranoid fühlen, verwenden Sie möglicherweise eher einen Zähler als einen Booleschen, aber das Konzept ist das gleiche.

Answer 2

Verwenden Sie den folgenden Code, um dies zu tun:

$('a').bind('click', false);

Answer 3

Definieren Sie eine separate Variable, die Ihren Löschzustand im Auge behält:

var isDeleting = false; 

$('.delete-answer').click(function(event) {
   if (!isDeleting) {
      isDeleting = true;

      $.post("../app/ForumCampus", {action:action, idMsg:idMsg}, function(data) { 
          isDeleting = false;
      });      
   }
});

Außerdem brauchen Sie keine href Attribut im Anker, wenn er keine URL enthält. Entfernen Sie es einfach insgesamt.

Answer 4

Eine weitere einfache Lösung ist nur .hide () / .show () Ihr Klickelement.

Answer 5

Da ich keinen Kommentar hinterlassen kann, ist dies eine Lösung für Noobs Frage zu Darms Post (VERKNÜPFUNG).

Ich glaube, die Seite verwendet welches auch immer .binden wurde zuerst implementiert, wenn zwei .binds werden für dasselbe Element verwendet. Also musst du .lösen Es zuerst, wenn Sie die Einstellung aus ändern möchten FALSCH zu STIMMT. Um den letztgenannten Code auf die Funktion/das Ereignis hinzufügen zu können, möchten Sie ihn wieder aufnehmen.

DEAKTIVIEREN

$('a').bind('click', true);

Wieder anerkannt

$('a').unbind('click', false);
$('a').bind('click', true);`

AUCH, Ich bin mir nicht sicher, warum, zurückbleiben Sie auf STIMMT Würde nicht funktionieren, wenn ich nicht "jQuery-ui.js" einbezogen habe.

Hoffe das hilft