一次从多个输入字段中进行jQuery Unbind事件

Question

I have requirement where I need to track changes to input fields in a particular div and trigger an event if something is changed.

I am using following code to accomplish that

                $('div.dc2-content:eq(1) input:not([aria-readonly])').each(function(){
                    var $elem = $(this);
                    $elem.data("oldval",$elem.val());
                    $elem.on("change",{ctx:this},setItemStatus);
                }); 

This is working fine but the second part of the requirement is that the event should be triggered only once. Which means that

1. When the first fields is changed trigger the event.
2. Then unbind the change from all the input fields

For this part I wrote following function

        function setItemStatus(event){
            var $el = $(this);
            if($el.val() != $el.data("oldval")){
                console.log("Invoke Update Method");
                //unbind the events so that it doesn't trigger the update twice.
                $('div.dc2-content:eq(1) input:not([aria-readonly])').each(function(){
                    var $elm = $(this);
                    $elm.off("change");
                });
            }

        }

But even after this change event is not unbinded it still triggers if I make a change in any other field of the form.

I know I can put conditions to stop executing the code but I would like to unbind.

Answer 1

You can use the Jquery's one method, instead of the on .

$('div.dc2-content:eq(1) input:not([aria-readonly])').each(function(){
  var $elem = $(this);
  $elem.data("oldval",$elem.val());
  $elem.one("change",{ctx:this},setItemStatus);
}); 

Then, you don't need to "off" the event anymore since that's what one method do.