请问如何用jquery暂时禁用链接然后再次激活？

做了一个简单的测试，楼主参考下
我会PHP，用.NET代替了，.NET很简单，只返回一行数据，所以在 jQuery 中没有清空表。我觉得问题的关键是，你要在效果完毕后再激活按钮
protected void Page_Load(object sender, EventArgs e)
    {
        string returnformat = "<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>";
        Response.Write(string.Format(returnformat, DateTime.Now.ToString(), (new Random()).Next(), "Good Morning"));
    }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>toggleSlide</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $().ready(function(){
            $('#loadingdiv').hide();
            $('#btnNewValue').click(function(){
                var btnNewValue=this;
                btnNewValue.disabled=true;
                $('#loadingdiv').show();
                $('#showdatatable').slideToggle('slow');
                //$('#showdatatable').empty();
                $.ajax(
                    {
                    url:'getNewValue.aspx',
                    type:'post',
                    cache:false,
                    data:null,
                    success:function(data){
                        $('#loadingdiv').hide();
                        $('#showdatatable').append(data);
                        $('#showdatatable').slideToggle('slow',function(){
                            btnNewValue.disabled=false;
                        });
                    }
                });
            });
        });
    </script>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            font-size:12px;
        }
        #loadingdiv{
            color:#f00;
            background-color:#000;
        }
        #showdatatable{
            border:3px solid #666;
            background-color:#000;
        }
        #showdatatable td{
            background-color:#fff;
        }
    </style>
</head>
<body>
    <input id="btnNewValue" type="button" value="插入新值" />
    <span id="loadingdiv">数据加载中……</span>
    <div>
        <table id="showdatatable">
        </table>
    </div>
</body>
</html>

用链接的话，需要改写一下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>toggleSlide</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $().ready(function(){
            $('#loadingdiv').hide();
            $('#btnNewValue').css('cursor','pointer').click(getData);
        });
        function getData(){
            $('#btnNewValue').unbind('click',getData);
            $('#loadingdiv').show();
            $('#showdatatable').slideToggle('slow');
            //$('#showdatatable').empty();
            $.ajax({
                url:'getNewValue.aspx',
                type:'post',
                cache:false,
                data:null,
                success:function(data){
                    $('#loadingdiv').hide();
                    $('#showdatatable').append(data);
                    $('#showdatatable').slideToggle('slow',function(){
                        $('#btnNewValue').click(getData);
                    });
                }
            });
            return false;
        }
    </script>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            font-size:12px;
        }
        #loadingdiv{
            color:#f00;
            background-color:#000;
        }
        #showdatatable{
            border:3px solid #666;
            background-color:#000;
        }
        #showdatatable td{
            background-color:#fff;
        }
    </style>
</head>
<body>
    <a id="btnNewValue" href="getNewValue.aspx">插入新值</a>
    
    <span id="loadingdiv">数据加载中……</span>
    <div>
        <table id="showdatatable">
        </table>
    </div>
</body>
</html>

我知道了
沙发的朋友发挥的是链接的href作用我的例子用的是jquery的click事件可能会因为这个有不同吧前者是普通的dom
后面是jquery的库了

问题已经解决原来使用bind 和 unbind
之前想到但是没用对
参见如下函数
$(document).ready(function(){
$('#loadingdiv').hide(); //hide loading image
getDBdata(); //load data history using ajax

$('#btnNewValue').click(function(){ //get new value and refresh history data list when place CLICK event
getNewDBdata();
});
});
function getNewDBdata(){ //call controller to get new random data and insert into DB
$('#loadingdiv').show();
$('#btnNewValue').unbind('click'); //!!!Important!!! Remove click event from btnNewValue
$('#showdatatable').hide();
$('.datatr').remove(); //before get data from DB, truncate all current data from table
$('#showdatatable').empty(); //and also remove any text content within the table
$.ajax({
type: "POST" ,
url: "controller.php",
data: "getNewValue=true" , //notify controller to initiate curl event and inerst new value in DB
cache: false ,
success: function(feedback){
$('#loadingdiv').hide(); //hide loading image
$('#showdatatable').append(feedback); //append new table
$('#showdatatable').slideToggle('slow'); //show table
$('#btnNewValue').bind('click', getNewDBdata); //!!!important!! retrieve click event
//event can work on current function
}
});
}

调试易

请问如何用jquery暂时禁用链接然后再次激活？

解决方案 »