jQuery selector and DataPager cannot coexist! (ASP .NET) - asp.net

Question

I am using a ASP .NET ListView with a MS SQL Database. I use the ListView to show the information and in the list view, there is an hyperlink which opens the editing window for the specific record in a jQuery Modal Dialog Box.
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<div id="itemPlaceholder" runat="server"> </div>
</LayoutTemplate>
<ItemTemplate>
<!--More Items -->
<a name="Link" href="EditItem.aspx?id=<%# Eval("articleid")%>">Edit</a>
<!--More Items -->
</ItemTemplate>
</asp:ListView>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:myConnectionString %>"
SelectCommand="SQL-SELECT-STATEMENT">
</asp:SqlDataSource>
<div>
And jQuery works by taking the link of each item which has the name "Link" and associating it with a dialog box.
<script type="text/javascript">
$(document).ready(function() {
$("a[name=Link]").each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: "Edit Article",
width: 500,
height: 550
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
Everything worked as it should. Earlier all the records could be shown in one go but as the number of records grew, I needed a paging solution. DataPager for the rescue!
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="5">
<Fields>
<asp:NextPreviousPagerField />
<asp:NumericPagerField />
</Fields>
</asp:DataPager>
But now the DataPager's controls are not working! I cannot go back,forward or click a page number as it will open the first data bound item's href in the ListView without a dialog box (Just like a normal page). But if i remove the jQuery code, the paging works as it should but I don't get the neat modal dialog box for my editing :(
Any ideas why these cannot exist with each other? Thanx a lot in advance :)
UPDATE: What doesn't work is that they cannot co-exist peacefully. If i remove the jQuery code, the DataPager works fine but I will lost my modal dialog box for editing. If i put the jQuery code back, the modal dialog box works fine but the DataPager doesn't :(

Answer 1

My guess is that link selector is probably selecting data pager links.
You can try $("a[name='Link']").each(.. note single quotes around attribute value.
Alternately, why don't you use id or class selectors. For example:
<a id="editLink" ...
and
$('a#editLink;).each(...