GridView Row Delete Using Ajax

Hi,

M going delete Row using Ajax using Script Manger

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" CssClass="table table-hover" AllowPaging = "true" GridLines="None" AutoGenerateColumns="False" OnPageIndexChanging="GridView1_PageIndexChanging">
<Columns>

<asp:TemplateField HeaderText="Product Name">
<ItemTemplate>
<asp:Label ID="lbPassport" runat="server" Text='<%# Bind("Title") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="30px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Bar Code">
<ItemTemplate>
<asp:Label ID="lb_StartDate" runat="server" Text='<%# Bind("Barcode") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="30px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label ID="lb_StartDate" runat="server" Text='<%# Bind("Description") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="30px" />
</asp:TemplateField>
<ItemTemplate>

<asp:TemplateField HeaderText="Status">

<a href="ProductMaster.aspx?Value=<%# Eval("id") %>" class="popup1">Edit </a>&nbsp;
<a href="#" id='<%# Eval("id") %>' onclick='DeleteProduct(this.id)' class="popup">Delete </a>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="30px" />
</asp:TemplateField>

</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>

when i delete row working fine,when i click page index go to Nextpage doesn ot work,ajax should not called

$('.popup').click(function () {

var source = this;
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
dataType: "json",
url: 'ProductMasterView.aspx/Product_Delete',
data: JSON.stringify({ id: this.id }),
}).
fail(function (s) {
alert(s);
})
.done(function () {
var par = $(source).parents('tr');
par.remove();
});
});

Row delete first page working fine.after delete one record go to next page delete record doesnot work..ajax shouldnt call??

Thanks