Add onblur attribute back after removing it

Question

I have a textbox that uses onblur and ondblclick - when they double click it opens a pop screen but I don't want the onblur to be triggered.

When the double click function is called I removed the onblur attribute to stop it getting triggered. This works but now I'm trying to add the onblur back after the pop up opens but it's not working

function OpenCust(v) {
             $('#<%= txtDebtor.ClientID %>').removeAttr('onblur');
             shadowboxopen = true;
             if (!v || 0 === v.length) {

             }
             else {
                 Shadowbox.open({
                     content: "lookups/Customer.aspx?NODEBT=true&CustomerAC=" + v,
                     player: "iframe",
                     onClose: function () { shadowboxopen = false; },
                     title: "Edit Customer"
                 });
             }
             $('#<%= txtDebtor.ClientID %>').attr('onblur');
        }

edit: Changed code to use on and off for the blur function but the onblur is still getting triggered when the double click OpenCust is being called.

textbox: <asp:TextBox runat="server" ID="txtDebtor" onblur="CheckIfAccountCodeDebtValid(this.value)" ondblclick="OpenCust(this.value)"></asp:TextBox>

function OpenCust(v) {
         $('#<%= txtDebtor.ClientID %>').off('blur', CheckIfAccountCodeDebtValid(v));
         shadowboxopen = true;
         if (!v || 0 === v.length) {

         }
         else {
             Shadowbox.open({
                 content: "lookups/Customer.aspx?NODEBT=true&CustomerAC=" + v,
                 player: "iframe",
                 onClose: function () { shadowboxopen = false; },
                 title: "Edit Customer"
             });
         }
         setTimeout(function() {
             $('#<%= txtDebtor.ClientID %>').on('blur', CheckIfAccountCodeDebtValid(v));
         }, 2000);

    }

what function you are calling on - onblur event – Satish Patil Jul 04 '19 at 12:02 — Satish Patil, Jul 04 '19 at 12:02
You could test shadowboxopen in the blur – mplungjan Jul 04 '19 at 12:04 — mplungjan, Jul 04 '19 at 12:04
@satsvelke the textbox - `` – user123456789 Jul 04 '19 at 14:11 — user123456789, Jul 04 '19 at 14:11

Mark Baijens · Answer 1 · 2019-07-04T14:43:46.997

You will have to specify the value of the onblur when re-adding it. The correct functions in jQuery to do this are on() and off(). In the example below you can see how I remove the blur event handler after clicking on the button but after 2 seconds ill add it again. If the button loses focus within these 2 seconds there won't be a blur console message. If it loses focus after it does.

//Add blur event handler to the button
$('#button').on('blur', blurFunction);

//Add click event handler to the button
$('#button').on('click', function() {
  //Remove blur event handler
  $('#button').off('blur', blurFunction);
  console.log('click');
  setTimeout(function() {
    //reattach blur event handler after 2 seconds
    $('#button').on('blur', blurFunction);
  }, 2000);
});

//The actual blur event handler function
function blurFunction() {
  console.log(this.value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="button" type="button" value="test-value">

With the function that uses a parameter you can wrap it in an anonymous function like in below snippet.

//Add blur event handler to the button
$('#button').on('blur', function() {
  CheckIfAccountCodeDebtValid(this.value);
});

//Add click event handler to the button
$('#button').on('click', function() {
  //Remove all blur event handlers
  $('#button').off('blur');
  console.log('click');
  setTimeout(function() {
    //reattach blur event handler after 2 seconds
    $('#button').on('blur', function() {
      CheckIfAccountCodeDebtValid(this.value);
    });
  }, 2000);
});

//The actual blur event handler function
function CheckIfAccountCodeDebtValid(value) {
  console.log(value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="button" type="button" value="test-value">

But I don't want to run the onblur, I just want to add the attribute back onto the textbox since I removed it. Using `on` is just triggering the onblur function, it's not actually attaching the onblur back onto the textbox — user123456789, Jul 04 '19 at 14:00
@user123456789 The on function is not running the event (as you can see in my code snippet), if it runs after attaching it is because the element loses focus or the event is triggered in some other way. Perhaps you can update your question with how you used `on()` then I can check if you did something wrong. — Mark Baijens, Jul 04 '19 at 14:29
@user123456789 I think you call the function while attaching because you try to send a parameter with it. If you want to send a parameter you have to wrap it in an anonymous function. I posted a second snippet with an example of that. Downside is that you can only remove all blur event handlers if you use anonymous functions. Better would be to not send this.value as a parameter since with this kind of event binding you can use this.value inside the function without sending it as a parameter. — Mark Baijens, Jul 04 '19 at 14:38
@user123456789 as expecting you run the function (by adding `()` to the function name) while passing it to the event handler. See my second snippet how to fix that if you really want to use parameters. — Mark Baijens, Jul 04 '19 at 14:42
@user123456789 Also updated my first snippet to show how you can use this.value inside the event handler so you don't have to send parameters. This would be the best solution. — Mark Baijens, Jul 04 '19 at 14:44

Add onblur attribute back after removing it

1 Answers1