jquery - 如何在使用 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');
});