如何使用jquery单击一次后禁用操作链接

Question

我有一个jsp页面。有一个动作链接。我希望当用户单击操作链接时，会对动作相关类执行某些操作。同时，对于任何其他第二次单击，链接应该被禁用。并且用户应该保持在同一页面上。还应该在同一页面上显示一条消息“链接已被禁用”有人可以提供一些代码或任何方法来执行此操作。感谢..

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