Question

我有一个ProductT的表，其中<tr>个元素在设计时声明了<input>个事件，但是从数据库动态填充。 onchange的HTML如下所示： -

<td >

在克隆了最后一个<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>

我尝试过的Javascript代码就像这样

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

和

$('#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;

但没有一个正在发挥作用。请指教。

Answer 1

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

要删除与onchange匹配的所有符号的内联事件列表器$('#hallTable tr:last').find('input')，您需要编写：

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

通常，您根本不应使用内联事件。使用addEventListener或者如果您想使用jQuery，请使用.on()。

Answer 2

由于事件处理代码是通过onclick属性附加的，因此您应删除这些属性：

$('#hallTable tr:last input').removeAttr('onclick');

请注意，这种方式你不必循环。

Answer 3

这对我有用。请试试。

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

无论是通过属性还是以编程方式添加事件，都应该有效。

js .off（）不处理元素

3 个答案: