Question

任何人都可以让我知道如何禁用特定列的点击事件。

场景：我们在表格中显示用户详细信息，一旦在表格行上进行了点击，弹出对话框窗口将显示更多详细信息（调用ajax请求以从数据库中检索详细信息）。但我们的约束是禁用与表关联的单个列的单击事件。

例如：

<table border = '1'>
<tr>
<th> Name </th>
<th> Id </th>
<th> Phone Number</th>
</tr>
<tr onclick = "testing()">
<td> Krupa </td>
<td> 123 </td>
<td id = "disableClick"> <a href = "http://www.google.com" target= '_blank'>Click me </a> </td>
</tr>
</table>

如果对文本（第1列和第2列）进行了单击，则会在单击事件时调用。但是，如果用户点击超级链接（第3列），我想将其重定向到Google但不是点击事件（testing（））。

任何人都可以帮助我实现这一目标。

Answer 1

尝试：

＆＃13;

$(function() {
  $('table td').on('click', function() {
    if ($(this).index() == 2) {
      return false; // disable 3rd column
    }
  });
  $('table tr').on('click', function() {
    alert('You click the row');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</table>

＆＃13;

Answer 2

通过CSS

执行此操作

table td:nth-child(2) {
    pointer-events: none;
}

Answer 3

如果您只想让click事件运行一次，理论上您可以使用jquery的let futureRef = Firebase(url: "parent/Users/User1") futureRef.removeValue()功能而不是.one()。这将在运行一次后自动取消绑定事件。当然这意味着你必须在事后再次绑定事件（如果你需要）

http://api.jquery.com/one/

例如

.on()

您可以做的另一件事是以某种方式检查$('.selector').one('click', function(){ // your callback functionality });是否处于活动状态，并阻止点击处理程序运行（如果是这样）

例如

popup

Answer 4

您可以在回调中使用jQuery .unbind()函数。

请考虑以下表格为例

<table>
  <tr>
    <th class='foo'>bar</th>
  </tr>
</table>

我们可以在onclick上停止th.foo个活动，如下所示

$('th').on('click', '.foo', function() {
  var that = this;

  // your AJAX call goes here

  success: function() {
    $(that).unbind('click');
  }
});

Answer 5

如何将点击事件添加到列中，然后在使用.unbind()点击事件后删除该事件。这将删除已单击的列的事件，但任何其他列仍应起作用。

$( '.column' ).on( 'click', function()
{
    // do ajax stuff... 

    // remove event 
    $( this ).unbind(); 

});

Answer 6

你可以通过CSS

来做到这一点

you_css_selector {pointer-events:none;}

禁用单列的单击事件

6 个答案: