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，则没有理由这样做。

Here is a fiddle.

Answer 2

你的第一个jQuery脚本实际上看起来很好......除了它所做的一切就是将类active应用于div。所以，当你点击第二个div时，现在你有两个div为active，第三个你有三个等等...

当您点击：

时，您想要做的是清除所有其他active课程

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

这与您仅使用divs向所有class="result"应用点击事件基本相同。您最好不要删除转发器onclick中的内联divs。然后你可以调用后续函数，如：

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

Updated JSFiddle

如何在asp.net转发器中选择div

2 个答案: