Imagebutton causing __dopostback event of some other javascript

Question

I have a gridview in asp.net webforms page with imagebuttons inside an updatepanel as well as a jquery ui slider with buttons and textboxes to pass the values to slider. I'm using the following script for slider:

        $(function () {
            var lvalue = $(".lblLRating").text();
            var rvalue = $(".lblHRating").text();
            $("#slider-range").slider({
                range: true,
                min: 0,
                max: 5,
                values: [lvalue, rvalue],
                slide: function (event, ui) {
               // ShowCurrentTime();
                // $(".txtRng1").trigger("Change");
                    $(".txtRng1").val(ui.values[0]);
                    var lVal = $(".txtRng1").val();
                    // some if conditions
                    $(".txtRng2").val(ui.values[1]);
                    var rVal = $(".txtRng2").val();
                    // some if conditions 
                    //document.getElementById("<%= btnApplyWt.ClientID %>").click();
                  $('#<%= btnApplyWt.ClientID %>').trigger('click');
                    __doPostBack("btnApplyWt_Click", "OnClick");
                }
            });
            $(".txtRng1").val($("#slider-range").slider("values", 0));
            $(".txtRng2").val($("#slider-range").slider("values", 1));
            var lVal = $(".txtRng1").val();
            // some if conditions
            }
        });

asp.net controls

    <asp:Button ID="btnApplyWt" runat="server" CssClass="btn btn-primary pull-right"
      OnClick="btnApplyWt_Click" Style="display: none;"></asp:Button> 
       <asp:TextBox ID="txtRng1" runat="server" CssClass="pull-right txtRng1" OnTextChanged="ontxt_TextChanged"
        AutoPostBack="true" Style="display: none;"></asp:TextBox>
  <asp:TextBox ID="txtRng2" runat="server" CssClass="pull-right txtRng2" OnTextChanged="ontxt_TextChanged"
      AutoPostBack="true" Style="display: none;"></asp:TextBox>

This is working fine as expected.

However, the main issue is with the ImageButtons inside the gridview. While clicking on an image button inside gridview, the ontxt_TextChanged event is being called instead of the imagebutton click event at first click. Then the imagebutton click event is working fine until we do a full postback (refresh the page manually).

Anyone has idea what's going wrong? Please let me know if I need to provide additional details.

Answer 1

The following two line will cause the OnTextChanged event fired before OnClick.

$(".txtRng1").val($("#slider-range").slider("values", 0)); $(".txtRng2").val($("#slider-range").slider("values", 1));