jQueryでクリックイベントを無効にします

StackOverflow https://stackoverflow.com/questions/6815703

質問

私の質問は、リンクの無効化/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を使用してすべてのイベントを解除する方法

結果：それは機能し、削除アンスワークラスでアンカーからクリックイベントをバインドしていませんが、：

1）AnchorsをDelete-Answerクラスでのみ非アクティブ化します。無効にすることを好みます 全て サーブレットがそれをしている間にリンク。

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

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

結果：通常のアンカーでは機能しますが、クラス削除を備えたアンカーでは機能しません。

どちらも互換性がないように見えるので、私は 本当 いくつかの助けに感謝します。

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

クラスを変更し、削除障害のあるクラスでのみアンカーを残しますが、再びクリックすると、メッセージが削除されているので、理由はわかりません。

役に立ちましたか？

解決

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

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

あなたが十分に妄想を感じている場合、あなたはブール値ではなくカウンターを使用するかもしれませんが、コンセプトは同じです。

他のヒント

次のコードを使用してそれを行います。

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

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

var isDeleting = false; 

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

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

また、あなたは必要ありません href Anchor内の属性が実際にURLを含んでいない場合。完全に削除するだけです。

別の簡単なソリューションは、Click要素の.hide（） / .show（）です。

私はコメントを残すことができないので、これはDarmの投稿に関するNoobの質問の解決策です（リンク).

ページはどちらの場合でも使用していると思います 。練る 2つの場合、最初に実装されました .binds 同じ要素に使用されます。だからあなたはしなければなりません 。解放する 設定をから変更したい場合に最初に 間違い に 真実. 。クリックするには、後者のコードを再度有効にしたい場合は、後者のコードを追加します。

無効にします

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

再度に対応できます

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

また, 、理由がわかりません 真実 「jquery-ui.js」を含めない限り、機能しません。

お役に立てれば

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top