JQuery blur is not working after DDL item chage

Question

I am using ASP.NET 4.5 to develop my application. In my application I have a dropdownlist (DDL) and some textbox controls. The textbox controls are holding some numeric values. There are some calculations depending upon the values in the textboxes and calculation will occur when any of the controls go out of focus. I have used the blur event for this purpose:

$("#MainContent_txtQty").blur(function () {
  alert('1');
  var Qty = $("#MainContent_txtNewQty");
}

$("#MainContent_txtRate").blur(function () {
  alert('1');
  var Qty = $("#MainContent_txtNewQty");
}

However when I change the DDL item the blur is not working. I have placed all my controls inside an update panel.

It's hard to tell the exact issue without seeing a working example of the problem. That being said, a `change` event on a `select` doesn't fire a `blur`, so it sounds like you need to use different events to achieve whatever it is you're trying to do — Rory McCrossan, Mar 13 '19 at 09:30
It's probably because of [this](https://stackoverflow.com/a/18144022/863110) — Mosh Feu, Mar 13 '19 at 09:32
Update panels in asp.net were always a bit of a hack and, in typical Microsoft fashion, never played nicely with other technologies. If you have a server-side event handler and, as you say, they are in an update panel, it's likely that the controls are being re-built (removed from the DOM and re-added). Therefore your `$("#id")` will not work as the matching select will be removed - you could try with event delegation, eg `$(document).on("blur", "#MainContet_txtQty", function() { ...` see @MoshFeu 's link for more info — freedomn-m, Mar 13 '19 at 09:36
Having added the above comment - it looks like you're saying *"when I change a DDL my textbox blur is not firing"* - why would you expect the textbox blur to trigger on a ` — freedomn-m, Mar 13 '19 at 09:38

score 0 · Answer 1 · answered Mar 13 '19 at 09:43

UpdatePanel could load asynchronously, so maybe the DDL is not the same that had the event subscription when his value is not changed.

To intercept the load of the updatepanel, try this:

<script> 
   ///<summary>
   ///  This will fire on initial page load, 
   ///  and all subsequent partial page updates made 
   ///  by any update panel on the page
   ///</summary>
   function pageLoad(){ 

          ///SELECT DDL AND SUBSCRIBE BLUR HERE
    }  
</script>

This pageLoad() function should be called when the updatePanel chenges, so you can try to select DDL "again" (to be explicit, again is a wrong term because the DDL is a new DDL, not the same that was before, even if has the same ID) and subscribe the blur event here

The result should be the subscription of the new DDL element every time that the update panel changes

JQuery blur is not working after DDL item chage

1 Answers1