jquery - jqueryを使用してワンクリック後にアクションリンクを無効にする方法

Question

私はjspページを持っています。アクションリンクがあります。ユーザーがアクションリンクをクリックすると、アクション関連のクラスでアクションが実行され、同時に他の2回目のクリックに対してリンクが無効になる必要があります。ユーザーは同じページにとどまる必要があります。また、同じページに「リンクが無効になっています」というメッセージが表示されるはずです。ありがとう..

Answer 1

これが可能な解決策です。スクリプトの仕組みはコメントで説明されています。

デモ

http://jsfiddle.net/insertusernamehere/hp45v/

JavaScript

$(document).ready(function () {

    // add a handler for the click event to the specific element
    $('#action_link').click( function(event) {

        // write that message
        $('#action_message').text('The link is disabled.');

        // do/call your action here (like ajax or some DOM stuff)
        $('#action_response').text('Something happened here');

        // release the event handler that it won't fire again
        $(this).unbind('click');

        // prevent default action of the link - this is not really necessary as the link has no "href"-attribute
        event.preventDefault();
    });

});

HTML

<a id="action_link">Action link</a>
<div id="action_message"></div>
<div id="action_response"></div>

拡大

異なるアクションを持つこれらのリンクが複数ある場合は、次のようなすべてのリンクにクラスを使用できます。

<a class="action" data-action="load">Action 1</a>
<a class="action" data-action="view">Action 2</a>

JavaScript 関数を次のように書き換えます。

// add a handler for the click event to all elements with the class 'action'
$('.action').click( function(event) {

    if ('load' == $(this).attr('data-action')) {
        // your action here (like ajax or some DOM stuff)
        $('#action_response').text('The action was: load'); 
    }

    if ('view' == $(this).attr('data-action')) {
        // your action here (like ajax or some DOM stuff)
        $('#action_response').text('The action was: view'); 
    }

    // release the event handler that it won't fire again
    $(this).unbind('click');
});