Jquery 中继器内的多个弹出窗口

我正在创建一个移动网站，我有一个摩托车模型的图片列表。我创建了一个列表，其中每个图像都是

列表项

，并且在

列表项

中添加了一个

div

，其中包含

data rel=“popup”

。所有东西都能正确编译和运行，但我在列表中单击的任何图像都只显示第一个图像。即，单击列表中的第三个列表项并打开弹出窗口时，显示图像#1。列表中的每个链接也是如此

你知道它为什么这样做吗？我知道我可以通过创建另一个jquery页面并重定向到该页面来解决这个问题，但是弹出窗口更干净，我想知道如何显示正确的图像，或者如果我忽略了什么

所有图像和数据都存储在sql server数据库中

代码如下：

<div data-role="content">
    <div id="SelectedPictorialDiv" runat="server">
        <ul data-role="listview" id="SelectedPictorialList">
            <asp:Repeater ID="SelectedPictorialRepeater" runat="server" DataSourceID="SelectedPictorialSqlDataSource"> 
                <ItemTemplate>
                    <li>
                        <a href="#SinglePicturePopup" data-rel="popup"> 
                            <asp:ImageButton ID="SelectedImageImageButton" runat="server" ImageURL='<%# Eval("ImageURL") %>' Width="75px" />
                            &nbsp&nbsp;<asp:Label ID="SelectedImageNumberLabel" runat="server" Text='<%# Eval("ImageNumber") %>'></asp:Label>
                            <asp:HiddenField ID="SelectedImagePictorialNumberHiddenField" runat="server" Value='<%# Eval("PictorialNumber") %>' />
                        </a>
                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                            <asp:Image ID="PopupImage" runat="server" ImageUrl='<%# Eval("ImageURL") %>' Width="100%" />
                        </div>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
        <asp:SqlDataSource ID="SelectedPictorialSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:KgIndex %>" 
            SelectCommand="SELECT ModelID, ImageURL, ImageNumber, PictorialNumber FROM Test_Models_Image WHERE ModelID = @modelID AND PictorialNumber = @pictorialNumber ORDER BY ImageNumber" >
            <SelectParameters>
                <asp:QueryStringParameter Name="modelID" QueryStringField="ModelID" Type="String" Direction="Input" />
                <asp:QueryStringParameter Name="pictorialNumber" QueryStringField="Pictorial" Type="String" Direction="Input" />
            </SelectParameters>
        </asp:SqlDataSource>
    </div>
</div>

{“appName”：“Chrome”，“requestId”：“c17b133f1b354c05bd3175a66999aee5”}

您只需创建一个全局弹出窗口，并根据单击的listview项更新其内容，而无需创建多个弹出窗口来实现相同的目的

为所有listview项指定一个

类

，并在页面的

pagecrate

上附加一个事件侦听器

<li>
   <a href="#" class="thumb">
      <input type="image" src="img.jpg"/>
   </a>
</li>

在页面div内创建一个弹出窗口

listview项收到事件后，检索弹出窗口、listview项和图像src。将检索到的图像插入弹出窗口，然后在加载图像后将其打开，以确保弹出窗口定位到listview项目

$（document）.on（“pagecreate”，“pageID”，函数（）{
/*附加事件侦听器*/
$（“.thumb”）。在（“单击”上，函数（e）{
/*检索数据*/
var popup=$（“#myPopup”），
elm=$（此），
img=$（“输入”，elm）.attr（“src”）；
/*将img插入弹出窗口并打开它*/
html（$（“

你能发布呈现的html吗？我添加了呈现的html，正如你所看到的，正确的URL在中，它们都是一样的。我想这会得到一个“MainContent”"附加到它的前面，就像它通常在中继器中一样，对吗？修复重复ID问题可以解决问题。但是，请注意，弹出窗口不应该包装在任何div中。它们应该是页面div的直接子级。如果放在子div中，它们可能会出现故障。必须使用唯一ID。另一个简单的解决方案是使用一个弹出并在调用时动态更新。一次弹出（干式）再次感谢@Omar！你让它变得再简单不过了。帮我省去了几个小时的头痛！
<li>
   <a href="#" class="thumb">
      <input type="image" src="img.jpg"/>
   </a>
</li>

<div id="myPopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
</div>

$(document).on("pagecreate", "#pageID", function () {
    /* attach event listener */
    $(".thumb").on("click", function (e) {
        /* retrieve data */
        var popup = $("#myPopup"),
            elm = $(this),
            img = $("input", elm).attr("src");
        /* insert img into popup and the open it */
        popup.html($("<img/>", {
            src: img
        }).one("load", function (e) {
            popup.popup("open", {
                positionTo: elm
            });
        }));

    });
});