javascript - js .off() 不适用于 元素

Question

我有一张 table <tr>有 ew <input>带有 onchange 的元素在设计时声明但从数据库动态填充的事件。 <td > 的 HTML看起来像这样:-

<td scope="col" style="width: 60px; font-weight: normal;">
  <input type="text" id="hall_name" name="hall_name" class="form-control" onchange="rowEdited($(this).parent())" value=<%=hallName %> ></input>
</td>
<td scope="col" style="width: 50px; font-weight: normal; text-align: center">
  <input type="text" style="text-align: center" id="hall_capacity" name="hall_capacity" onchange="rowEdited($(this).parent())" class="form-control" value=<%=hallCapacity %>></input>
</td>
<td scope="col" style="width: 75px; font-weight: normal; text-align: center">
  <input type="text" id="hall_location" name="hall_location" onchange="rowEdited($(this).parent())" class="form-control" value=<%=hallLocation%>></input>
</td>

克隆最后一个 <tr> 之后，我正在尝试删除 onchange来自最后一个 <tr> 中所有输入的事件但它不起作用。

克隆最后一个的js代码<tr>看起来像这样:-

var row = $('#hallTable tr:last');
var new_row =  $(row).clone(false,false).off();

到目前为止我尝试的 Javascript 代码是这样的

$('#hallTable tr:last').find("*").off();

和

$('#hallTable tr:last').find(':input').each(function(){
    $(this).unbind('onchange', rowEdited);
})

$('#hallTable tr:last').find('input:checkbox').each(function(){
    $(this).unbind('onchange', rowEdited);

和

    $('#hallTable tr:last').find('input').onchange = null;

和

$('#hallTable tr:last').find('input').unbind('onchange', 'rowEdited');

但没有一个在工作。请指教。

Answer 1

jQuery .off()或 unbind 函数仅删除使用 jQuery 添加的事件监听器。他们不会删除内联事件监听器(如 onchange="rowEdited($(this).parent())")。

要为所有匹配 $('#hallTable tr:last').find('input') 的元素移除内联事件监听器 onchange，您需要写:

$('#hallTable tr:last').find('input').each(function() {
  this.onchange = null;
})

一般来说，您根本不应该使用内联事件。要么使用 addEventListener或者如果你想使用 jQuery 然后使用 .on() .