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

Question

<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点击页面

加载，一旦他点击启用链接，那么只有TD点击将被启用？如何实现？

谢谢

Answer 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>

Answer 2

你需要删除 onclick 属性，.unbind(( 只删除那些由 bind(( 添加的处理程序

$(document).ready(function () {
    $("#column1").removeAttr('onclick');
});

演示：小提琴

Answer 3

可以删除 a 标记上的 HTML 中的内联事件处理程序。 这个事件处理程序可以纯粹用Javascript赋值。

将回调分配给 a 标记的 click 事件处理程序。 在此函数中，在 #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>

爪哇语

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

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

Answer 4

试试这个伙伴。

我对您的代码进行了一些更改。

$(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");
      }
 });
 });