Jquery not called while using updatepanel in asp.net - asp.net

Question

I have web application under which I am using update panel of some part of website. Update panel working properly but problem is there is jquery which is not working when I use update panel. First my jquery was inside update panel. It didn't worked so I tried to put it outside updatepanel But that too didn't worked. Is there additional things required to make it work if updatepanel used. Following is my code
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<input id="decrement" type ="button" value="-" class="add-sub-button" />
<asp:TextBox ID="quantity" ClientIDMode="Static" Text="1" CssClass="quantity" runat="server"></asp:TextBox>
<input id="increment" type ="button" value="+" class="add-sub-button" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="medicinesList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<script type="text/javascript">
$(document).ready(function () {
$("#increment").click(function () {
if ($('#quantity').val() != "90") {
var $n = $("#quantity");
$n.val(Number($n.val()) + 1);
}
});
$("#decrement").click(function () {
if ($('#quantity').val() != "1") {
var $n = $("#quantity");
$n.val(Number($n.val()) - 1);
}
});
});
</script>

Answer 1

use your java script like
<script type="text/javascript">
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack();
function EndRequestHandler(sender, args) {
$("#increment").click(function () {
if ($('#quantity').val() != "90") {
var $n = $("#quantity");
$n.val(Number($n.val()) + 1);
}
});
$("#decrement").click(function () {
if ($('#quantity').val() != "1") {
var $n = $("#quantity");
$n.val(Number($n.val()) - 1);
}
});
}
});
</script>

Answer 2

Any events directly bound to DOM elements inside the UpdatePanel are lost on post backs. You will therefore need to use Delegated Events to ensure the desired behaviour is preserved.
This is done by binding the events to a container outside of the UpdatePanel and specifying a selector paremeter (representing the actual target) using the jQuery on() method instead of click().
selector - A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.
<div id="myPanel">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<input id="decrement" type="button" value="-" class="add-sub-button" />
<asp:TextBox ID="quantity" ClientIDMode="Static" Text="1" CssClass="quantity" runat="server"></asp:TextBox>
<input id="increment" type="button" value="+" class="add-sub-button" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="medicinesList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#myPanel").on("click", "#increment", function() {
if ($("#quantity").val() != "90") {
var $n = $("#quantity");
$n.val(Number($n.val()) + 1);
}
});
$("#myPanel").on("click", "#decrement", function() {
if ($("#quantity").val() != "1") {
var $n = $("#quantity");
$n.val(Number($n.val()) - 1);
}
});
});
</script>