确定文本框值更改后是否立即单击按钮

Question

I have screen like following:

I have bound the change event of textboxes under box2 column.Now the change event is fired when a user clicks out after changing the values but I do not want the user to click the Buttons in the screen after making the change in box2 textboxes.

This means I want to prevent the click of the buttons if a user is clicking on them right after making a change in any of the textboxes but at the same time the change event of the particular box should fire as usual.

Is it possible to find out the last widget or the event fired in an event,It sounds odd but I can stop the click of the button if I can determine that very last thing happened was the change of textbox.

 //Change listener of textboxes
  jQuery('#parent').on('change','.textbox',function(e){

        var btn = jQuery(this).closest('.button');         
        if(btn.length){  
          jQuery(this).addClass('red',500,function(){ 
             var poObj = {'changedRef':{'val':jQuery(this)}};      
             btn.triggerHandler('click',poObj);
          });
        } 
      });

    //this is a buttonClick  
      jQuery('.button').on('click',handlerBtnClick);

You can see from the code that change on the textbox is actually calling the click of the corresponding button that is in its row.But the problem is if a user clicks on a button of different row after making a change in a box.

Ideas please?

Thanks

Answer 1

ps

event.type gives the event that was triggered.

Have

1)Click function for your button( eg:func1() )

2)Change function for your textboxs( eg:func2() )

Declare a global variable ( for eg: eventTp)

When func2() gets called, assign event.type to the variable eventTp . When func1() gets called , check if eventTp variable has the value (Change) .

If yes, then give return false, which will prevent the event from happening.

Hope this helps.

Answer 2

You mean something like this ?

 var button = document.getElementById('button'); document.getElementById('box2').addEventListener('change',function(){ button.disabled = true; }); document.getElementById('box1').addEventListener('change',function(){ button.disabled = false; }); 

 <input type='text' id='box1'> <input type='text' id='box2'> <button id='button'>Button</button>