jquery - jQueryでクリックイベントを無効にする

Question

私の質問は、jQueryを使用してリンク/クリックイベントを無効にすることに関するものであり、おそらく私が思っているよりも簡単です。簡単にするために重要なコードにコメントしました。

.jsファイルに次のコードがあります。

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

});

そして私のHTMLには、次のようなリスト項目があります。

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

ご覧のとおり、クリックイベントを無効にする方法を2つ試しました。

方法1：次の方法を試しました：jqueryを使用してすべてのイベントのバインドを解除する方法

結果：これは機能し、delete-answerクラスを使用してアンカーからクリックイベントのバインドを解除しますが、次のようになります。

1）delete-answerクラスでのみアンカーを非アクティブ化します。サーブレットが処理を実行している間は、すべてのリンクを無効にすることをお勧めします。

2）リンクを再度有効にすることができません（または方法がわかりません）。

方法2：次の方法を試しました：jQueryでリンクを動的に有効/無効にするにはどうすればよいですか？

結果：通常のアンカーでは機能しますが、クラスdelete-answerのアンカーでは機能しません。

どちらも互換性がないようですので、助けていただければ幸いです。

---

注：これを行ってクラスを変更しようとしました：$('.delete-answer').addClass('delete-disabled').removeClass('delete-answer');

クラスを変更し、delete-disabledクラスのみでアンカーを残しますが、もう一度クリックすると、メッセージが削除されたままで、理由がわかりません：/

Answer 1

次のコードを使用して実行します。

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

Answer 2

そのすべてのコードを関数にラップし、フラグを使用します。

1. これを一番上に追加します：

   (function() {
   

2. これを一番下に追加します：

   })();
   

3. 上の行のすぐ下に、次を追加します。

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

4. クリック ハンドラーの一番上:

   if (!deleteAnswerEnabled) {
       return false;
   }
   

5. 次のように変更postします。

   // 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;
   });
   

すべてをまとめると:

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

十分に偏執的であると感じている場合は、ブール値ではなくカウンターを使用することもできますが、概念は同じです。

Answer 3

削除状態を追跡する別の変数を定義します。

var isDeleting = false; 

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

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

hrefまた、実際にURLが含まれていない場合は、アンカー内に属性は必要ありません。完全に削除するだけです。

Answer 4

別の簡単な解決策は、クリック要素を .hide() / .show() にすることです。