使用jQuery删除HTML onchange代码

Question

Below code snippet has HTML onchange attribute as well as jQuery's change event on the input text. I want only the jQuery's change event to be effective. I tried using both unbind and off without luck.

Could somebody please help?

 $(document).ready(function(){ $("#testInput").unbind("change").bind("change",function(){ console.log("jQuery change"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="testInput" type="text" onchange="console.log('change');"/> 

Answer 1

If you want to remove the "previous" onchange event, use $("#testInput").removeAttr("onchange")

 $(document).ready(function() { $("#testInput").removeAttr("onchange") $("#testInput").unbind("change").bind("change", function() { console.log("jQuery change"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="testInput" type="text" onchange="console.log('change');" /> 

Answer 2

you could set the onchange to null and add listener, like:

$(document).ready(function(){
    //remove inline 'onchange' event by setting it to null
    $("#testInput")[0].onchange = null;

    $(document).on("change" "#testInput", function(){
      console.log("jQuery change");
    });
});

Answer 3

Just remove onchange attribute. removeAttr('onchange') will remove onchange attribute

 $(document).ready(function(){ $("input").each(function(){ $(this).removeAttr('onchange'); }); $("input").bind("change",function(){ console.log("jQuery change"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="testInput" type="text" onchange="console.log('change');"/> <input id="testInput2" type="text" onchange="console.log('change');"/> 

Answer 4

try this

$(document).ready(function(){
  $(document).on('change','#testInput',function(){
    console.log("jQuery change");
  });
});