jquery - 如何在 asp.net 转发器中选择一个 div

Question

我在 asp.net 转发器中有一个 div。当用户单击其中一个 div 时，我想在客户端处理一个事件。

我已经在 div (class="result") 中尝试了 onClick 处理程序，但它似乎没有触发。还有其他事件我也可以配合吗？

我也尝试使用 jquery 创建一个事件处理程序，但我不确定如何选择用户单击的元素。现在，我似乎将事件与所有 div 联系起来。知道如何修复单个 div 元素的 jquery 选择器吗？

我的中继器:

<div id="search-results" >
    <asp:Repeater ID="pageResults" runat="server" ItemType="ArchiveViewer.Logic.PageResult" 
        SelectMethod="GetSearchResults" OnItemDataBound="pageResults_ItemDataBound" >
             <ItemTemplate> 
                <div class="result" data-pageid="<%#:Item.PageId %>" data-pageNumber="<%#:Item.Number %>"
                    onclick="resultSelected"  >
                        <div>
                            Page: <%#:Item.Number %>
                        </div>  
                        <div>
                          <asp:Label ID="lblSearchResult" runat="server" ></asp:Label>
                        </div>                                        
                 </div>
             </ItemTemplate>
     </asp:Repeater>
</div>

还有我的 jquery 脚本:

$('#search-results div').click(function (e) {
        $(this).removeClass('active');
        $(this).addClass('active');
        // this is setting the active class for all the div's in the repeater...
});

var resultSelected = function () {
        // this is not working
};

编辑:

我不再在 div 中使用 onclick 事件。我的 jquery 代码如下所示:

添加 .active 类:

        $('#search-results div.result').click(function (e) {
            var pageNumber = ($(this).attr('data-pageNumber'));

            if (pageNumber != null) {
                $("#search-results div").removeClass('active');             
                $(this).addClass('active');
                getHighlightResults(pageNumber);
            }
        });

       var getHighlightResults = function (pagenumber) {
           // Do some stuff
           // Some function where I trigger the event on the active class
           $('div.result.active').trigger('first-click');           
        };

以下未被触发。是因为我的选择器不正确吗？

$('div.result.active').bind('first-click', function (e) {
            var pageNumber = ($(this).attr('data-pageNumber'));
            alert("in bind: " + pageNumber);
            if (pageNumber != null) {
                var dv = $('#diva-viewer').data('diva');                
                dv.gotoPageByNumber(pageNumber);
                e.stopImmediatePropagation();
            }
});

Answer 1

要使这项工作正常进行，您需要进行一些更改。您的转发器生成与此类似的 html:

<div id="search-results">
    <div class="result" onclick="resultSelected();">
        <div>result</div>
        <div>some label</div>
    </div>
    <div class="result" onclick="resultSelected();">
        <div>result</div>
        <div>some label</div>
    </div>
</div>

您需要删除所有 div 上的事件类，但只将其添加到被点击的 div 中:

$("#search-results div.result").click(function(){
    $("div").removeClass("active");
    $(this).addClass("active");
});

resultSelected = function(){
    console.log("clicked, but don't really need this...");
}

如果您想将 onclick 处理程序添加到 html，您需要将其更改为通过名称末尾的 () 调用函数。您还需要更改脚本以声明函数而不将其定义为 var。如果您使用的是 jQuery，则没有理由这样做。

Here is a fiddle.