代码之家 › 专栏 › 技术社区 › NoBullMan

使用jQuery和ASP repeater处理图像onclick事件

repeater onclick asp.net jquery

1

NoBullMan · 技术社区 · 8 年前

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

这是为用户输入一些用户的姓氏,在图像点击,我搜索广告的基础上的姓氏,并提出了一个广告用户找到名单,并要求用户选择一个。

我尝试了不同的捕捉单击事件的方法,但都没有成功。这是我所尝试过的(我同时包含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>

要设置onclick的jQuery;单击图像时,这些都不会命中:

$('#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);
});

1 回复 | 直到 8 年前

1

Zakaria Acharki 8 年前

首先 id 在同一文档中应该是唯一的,所以请替换重复的 imgSelUser &安培; tbSUserLookup 按常用类别,例如:

<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);
});