Question

我有<td>，其中包含<span>标记。 td标记有一个点击事件，<span>标记有一个id。单击跨度时，我想断开<td>标记的单击事件。如何通过引用span标记来完成？

<Table>
    <tr>
        <td onClick="disconnectHandler();"><span id="testin">Hello</span></td>
    </tr>
</Table>

这就是我的JavaScript：

function disconnectHandler()
{
    alert("Hi Hello");
    $("#testin").parent().unbind();
}

它会一直显示警告框。这段代码有什么问题？

此外，我想在删除它后稍后将click事件附加到它！

Answer 1

由于jQuery的事件模型，第一个unbind场景不起作用。 jQuery将每个事件处理函数存储在一个数组中，您可以通过$（“＃foo”）。data（'events'）访问它。 unbind函数仅查找此数组中的给定函数。因此，您只能取消绑定（）使用bind（）
添加的事件处理程序

<强> Reference.

<强> Working fiddle

您无法使用unbind，但可以使用onclick删除prop()属性：

function disconnectHandler()
{
  alert("Hi Hello");
  $("#testin").parent().prop('onclick',null);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td onClick="disconnectHandler();"><span id="testin">Hello</span></td>
  </tr>
</table>

如果您想在首次点击后停用点击，最好使用 one() ，请查看以下示例。

说明： one()将处理程序附加到元素的事件。每个事件类型的每个元素最多执行一次处理程序。

希望这有帮助。

$(function(){
  $('body').one('click', '#testin', function(){
    alert("Hi Hello");
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><span id="testin">Hello</span></td>
    </tr>
</table>

Answer 2

这将绑定td元素上的click event only once

$(document).ready(function() {
    $('#testin').one('click', function(){
         alert('Hello there');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td><span id="testin">Hello</span>
    </td>
  </tr>
</table>

修改

我的回答与Zakaria's之间的主要区别在于，他可以在以后添加更多范围（如果您使用class而不是id，那么。

$('body').one('click', '#testin', function(){});将#testin内的所有body绑定到click个事件。

$('#testin').one('click', function{});将#testin上已有的所有document绑定到click个事件。

编辑2

回答你的问题：

它会一直显示警告框。这段代码有什么问题？

您尚未将事件绑定到td元素，每次点击它都会调用函数名称disconnectHandler()。

function doSomething() {
  alert('alerted')
  }

function removeEvent() {
  document.getElementById('doer').removeEventListener('click', doSomething);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="doer" onclick="doSomething()">Click me</p>

<p id="undoer" onclick="removeEvent()">Remove his event</p>

如您所见，所谓的事件是他的DOM的一部分。您没有删除该属性，这就是它仍然调用function

的原因

Answer 3

也可以尝试

function disconnectHandler()
{
    alert("Hi Hello");
    $("#testin").parent().attr('onclick',"")
}

使用jQuery断开父节点的click事件

3 个答案:

修改

编辑2