如何在 asp.net 中继器中选择 div

Question

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

我已经在div 中尝试了 onClick 处理程序（class="result"），但这似乎没有触发。还有其他事件我也可以绑起来吗？

我还尝试使用 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，就没有理由这样做。

这是一个小提琴。

Answer 2

你的第一个jQuery脚本实际上看起来不错......除了它所做的只是将类active应用于div。因此，当您单击第二个div时，现在您有两个具有类active的div，而第三个div有三个，依此类推...

您要做的是在单击时清除所有其他active类：

$('#search-results div').click(function (e) {
    $('#search-results div').each(function () {
        $(this).removeClass('active');
    });
    $(this).addClass('active');
});

这基本上与您仅使用 class="result" 将单击事件应用于所有divs相同。您最好删除中继器divs中的内联onclick。然后，您可以调用后续函数，例如：

$('#search-results div.result').on('click', function () {
    var pageNumber = ($(this).attr('data-pageNumber'));
    console.log('Fetched ' + pageNumber);
    if (pageNumber != null) {
        $('#search-results div.result').each(function () { 
            $(this).removeClass('active');
        });
        //add the active class and click handler
        $(this).addClass('active');
        getHighlightResults(pageNumber); //call getHighlightResults with pageNumber
        activeDivAction(this); // call activeDivAction passing the div that was clicked
    }
});
var getHighlightResults = function (pageNumber) {
    // Do some stuff
    console.log('inside getHighlightResults for ' + pageNumber); 
};
var activeDivAction = function(activeDiv) {
   var pageNumber = ($(activeDiv).attr('data-pageNumber'));
   console.log('inside activeDivAction for ' + pageNumber);
};

更新的 JSFiddle