javascript - 如何在asp转发器控件中显示模式弹出窗口

Question

我有以下代码，它根据属性 id 绑定(bind)属性:

<form>
<!-- Main div -->
<div class="row">
<asp:Repeater ID="rptProperties" runat="server">
 <HeaderTemplate>
 </HeaderTemplate>

<ItemTemplate>
    <div class="item col-md-4">
    <div class="price">
        <%# CustomFormat(Int32.Parse(Eval("budget").ToString())) %>
    </div>
    <div class="info">
    <h3>
        <%# DLResale.getBedNameByID( Int32.Parse(Eval("beds").ToString())) %> <%# DLResale.getConfigNameByID( Int32.Parse(Eval("propertyConfig").ToString())) %>
    </h3>
    <h3>
        <small><i class="fa fa-map-marker"></i> <%# Eval("locationStr") %>, <%# Eval("cityStr") %></small>
    </h3>

    <ul class="amenities">
        <li style="margin-bottom: 10px;">
            <a id="ViewDetails" class="btn btn-default-color btn-sm view-price"><i class="fa fa-home"></i>View Details</a>
        </li>
    </ul>

    </div>
    </div>
</ItemTemplate>

<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>

<!-- Modal Popup-->
<div id="m-request-details" >
<div>
    <asp:TextBox ID="txtMobile" runat="server" ></asp:TextBox>
</div>

<div class="modal-footer text-center">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <asp:Button ID="btnDetail" runat="server" Class="btn btn-default-color btn-sm" Text="Submit" OnClick="btnDetail_Click" CausesValidation="true" ValidationGroup="DetailsGroup" />
</div>
</div>

<form>

打开模式弹出窗口的 JavaScript 代码如下:

$("#ViewDetails").click(function () {
                console.log("modal");
                $('#m-request-details').modal({ backdrop: 'static', keyboard: false });
            })

但是页面上有 10 个属性，但是当我单击“查看详细信息”时，弹出窗口仅针对第一个属性打开，而不是其他属性。

C# 中继器绑定(bind) 10 个属性，因为每个属性的数据列都相同，即预算、床位、位置。

谁能弄清楚为什么模式弹出窗口只为第一个属性打开，而不为其余属性打开？？？？？？？

Answer 1

<a id="ViewDetails" class="btn btn-default-color btn-sm view-price"><i class="fa fa-home"></i>View Details</a>

您的问题出在标签的 id 上。您可能会生成多个链接，并且它们没有相同的 id，这就是为什么 $("#ViewDetails").click(function () 不起作用。

有多种方法可以获取列表项点击功能，请参见下面的示例:

 <ul class="amenities">
        <li style="margin-bottom: 10px;">
            <a class="btn btn-default-color btn-sm view-price"><i class="fa fa-home"></i>View Details</a>
        </li>
    </ul>

$("ul.amenities li").click(function () {
                console.log("modal");
                $('#m-request-details').modal({ backdrop: 'static', keyboard: false });
            })