根据条件禁用和启用onclick事件

时间:2013-11-27 10:22:27

标签: jquery

<script>
$(document).ready(function() 
{
$("[id^=column]").unbind('click',popup);
});

function popup()
{
    alert('gggg');
}

function enable()
{
    $("[id^=column]").bind('click',popup);
}
</script>

<a onclick="enable()">enable</a>
<table width="200" border="1" style="border-collapse:collapse;">
<tr><td id="column1" onclick="popup('a')">1</td></tr>
<tr><td id="column2" onclick="popup('b')">2</td></tr>
<tr><td id="column3" onclick="popup('c')">3</td></tr>
<tr><td id="column4" onclick="popup('d')">4</td></tr>
<tr><td>5</td></tr>
</table>

您好,

我想在页面加载时禁用表格TD onclick一旦他点击启用链接然后只启用TD onclick?如何实现这一点?

谢谢

4 个答案:

答案 0 :(得分:1)

为什么不在单击启用链接时绑定弹出功能?

<script>
function popup()
{
    var $this_el = $(this);
    var param_1 = $this_el.attr("data-parameter-1");
    alert('Parameter is: ' + param_1);
}

// bind click event to td
function enable()
{
    $('.clickable').on('click', popup);
}

// bind click event to enable link
// using .one() will unbind itself after it is triggered once.
$(document).ready(function() 
{
    $('#enabler').one('click', enable);
});
</script>

<a id="enabler">enable</a>
<table width="200" border="1" style="border-collapse:collapse;">
<tr><td id="column1" class="clickable" data-parameter-1="a">1</td></tr>
<tr><td id="column2" class="clickable" data-parameter-1="b">2</td></tr>
<tr><td id="column3" class="clickable" data-parameter-1="c">3</td></tr>
<tr><td id="column4" class="clickable" data-parameter-1="d">4</td></tr>
</table>

答案 1 :(得分:0)

您需要移除onclick属性,.unbind()仅移除由bind()

添加的处理程序
$(document).ready(function () {
    $("#column1").removeAttr('onclick');
});

演示:Fiddle

答案 2 :(得分:0)

可以删除a标记上HTML中的内联事件处理程序。此事件处理程序可以纯粹使用Javascript进行分配。

a标记的点击事件处理程序分配回调。在此函数内,在#column1上设置click事件处理程序。

<强> HTML

<a>enable</a>
<table width="200" border="1" style="border-collapse:collapse;">
<tr><td id="column1" onclick="popup()">1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
</table>

<强>的Javascript

$(document).ready(function() 
{
    $("a").one("click",function(){
        $("#column1").click(function(){
            popup();
        });     
    });
});

function popup()
{
    alert('gggg');
}

JS小提琴: http://jsfiddle.net/TCrR4/

答案 3 :(得分:0)

试试这个伙伴..

我在代码中做了一些更改..

$(document).ready(function() 
{
  $("a").click(function(){
    if($(this).hasClass("action"))
      {
        $("#column1").removeClass("action")
        $("#column1").bind("click",function(){  
        alert("hiii");
      $(this).unbind("click");}); 
       alert("binded");
      }
    else
     {
        $("#column1").addClass("action")
        $("#column1").unbind("click");
        alert("unbinded");
      }
 });
 });