js .off（）没有工作 <tr> 分子

Question

I have a table with <tr> having ew <input> elements with onchange event declared at design time but filled dynamically from database. The HTML of the <td > looks like this:-

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

After cloning the last <tr> , I am attempting to remove the onchange events from all inputs in the last <tr> but it is not working.

The js code to clone the last <tr> looks like this:-

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

The Javascript codes I attempted until now are like this

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

and

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

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

and

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

and

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

But none are working. Please advise.

Answer 1

The jQuery .off() or unbind functions remove only event listeners that have been added using jQuery. They won't remove inline event listners (like onchange="rowEdited($(this).parent())" ).

To remove the inline event listner onchange for all ements that match $('#hallTable tr:last').find('input') you would need to write:

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

In general you should not use inline events at all. Either use addEventListener or if you want to use jQuery then use .on() .

Answer 2

Since the event handling code is attached via onclick attributes, you should remove those attributes:

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

Note that this way you don't have to loop.

Answer 3

This worked for me. Please try.

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

Should work regardless if the event is added via attributes or programmatically.