使用 jQuery 和 ASP 中继器处理图像 onclick 事件

Question

我有一个转发器，其中包括一个文本框和旁边的图像。当用户输入文本并单击图像时，我想打开一个模态弹出窗口。

这是为用户输入一些用户的姓氏并在点击图片时，我根据姓氏搜索 AD 并向用户提供找到的 AD 用户列表，并要求 select 一个。

我尝试了不同的方法来捕捉点击事件，但 none 奏效了。这是我尝试过的（我同时包括 HTML 图像和 ASP 图像，以免重复代码，但只有一张图像）：

<asp:Repeater runat="server" ID="rptQuestions" ClientIDMode="Static" OnItemDataBound="rptQuestions_ItemDataBound">
    <ItemTemplate>
        <div class="row">
            <div class="col-sm-6 col-md-6">
                <div class="form-group">
                    ...
                    <div runat="server" id="divSUserLookup" clientidmode="static">
                        <input runat="server" id="tbSUserLookup" clientidmode="Static" type="text" class="input-small" style="width: 80%" />
                        <asp:Image runat="server" ClientIDMode="Static" ID="imgSelUser" name="imgSelUser" ImageUrl="assets/Images/user_32.png" AlternateText="Select User" />
                        <img src="assets/Images/user_32.png" alt="Select User" id="imgSelUser" />
                    </div>
                    ...
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

jQuery设置onclick； none 个在点击图像时被点击：

$('#imgSelUser').on('click', function (ev) {debugger       
    var lastName = $("[id*=tbSUserLookup]").val();

    if (lastName.trim() == '')
        return false;

    open_popup(lastName);
});

// Accessing control inside repeater
$("[id*=imgSelUser]").on('click', function (ev) {debugger      
    var lastName = $("[id*=tbSUserLookup]").val();

    if (lastName.trim() == '')
        return false;

    open_popup(lastName);
});

Answer 1

首先id在同一个文档中应该是唯一的，所以请将重复的imgSelUser和tbSUserLookup替换为common 类，例如：

<asp:Repeater runat="server" ID="rptQuestions" ClientIDMode="Static" OnItemDataBound="rptQuestions_ItemDataBound">
    <ItemTemplate>
        <div class="row">
            <div class="col-sm-6 col-md-6">
                <div class="form-group">
                    ...
                    <div runat="server" id="divSUserLookup" clientidmode="static">
                        <input runat="server" class="input-small tbSUserLookup" clientidmode="Static" type="text" style="width: 80%" />
                        <asp:Image runat="server" ClientIDMode="Static" class="imgSelUser" name="imgSelUser" ImageUrl="assets/Images/user_32.png" AlternateText="Select User" />
                        <img src="assets/Images/user_32.png" alt="Select User" id="imgSelUser" />
                    </div>
                    ...
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

由于您的 DOM 是动态生成的，因此您需要使用事件委托 on() 将事件附加到这些元素，并使用 this 关键字来定位相关元素，例如：

$('body').on('click', '.imgSelUser', function (ev) {
    var lastName = $(this).parent().find('.tbSUserLookup').val();

    if (lastName.trim() == '')
        return false;

    open_popup(lastName);
});

使用 jQuery 和 ASP 中继器处理图像 onclick 事件

Handling image onclick event using jQuery and ASP repeater

asp.net

jquery

repeater

onclick