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

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

我在div中尝试了onClick处理程序（class=“result”），但似乎没有触发。还有其他活动我也可以参加吗

我还尝试使用jquery创建事件处理程序，但我不确定如何选择用户单击的元素。现在，我似乎把这件事和所有的部门联系在一起。知道如何修复单个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>

编辑：

我不再在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();
            }
});

---

您的第一个jQuery脚本实际上看起来不错。。。除了将class

active

应用于一个div之外，它所能做的就是将class

active

应用于一个div。因此，当您单击第二个div时，现在您有两个class

active

的div，而第三个div则有三个，以此类推

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

活动

类：

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

这基本上与使用

class=“result”

对所有

div应用单击事件相同。您最好删除中继器
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);
};

要使这项工作正常进行，您需要做一些更改。您的转发器生成的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>

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

我知道我不需要两者，但因为两者都不起作用，我一直在想是什么起作用了。；）因此，如果我想为“active”结果的click事件创建一个处理程序（在我创建之后，我会这样做：
$（'.result-active'）.bind（'first-click'，function（e））吗{…
因为这不起作用…@Tums更新了答案，并添加了一个提琴，说明如何仅为活动div绑定和解除绑定事件，如果这是您正在尝试做的，那么解除对单击事件的绑定并不是我想要做的。我不希望用户必须双击。我触发了一个我只想运行的事件.active div是在用户单击它们之后出现的。不解除绑定就可以了吗？我不知道你想做什么。当用户单击一个div时，它会变为活动状态，你可以运行任何你想要的功能。两个答案都显示一次只有一个active div。这不是你想要的吗？你想要任何数量的div都可以被单击并释放吗然后变为活动状态，每次他们单击一个div时，你都会在所有活动div上运行一个函数？我已经更新了我的问题，希望如此更清楚。感谢有关变量的信息。这确实有帮助。click事件将绑定到选择器指定的元素。它仅为您单击的div激发。活动类仅添加到您单击的外部结果div。外部结果是什么？您的div在具有类result的div中。您的原始l代码的选择器仅限于div，而不是div.result。因此，事件处理程序实际上绑定到div.result及其内部的div。这可能也是为什么您会得到奇怪的结果。当用户单击div时，我调用一个函数来获取一些数据，更新第三方插件，在活动的d上触发事件iv.如果我为
active
div指定最后一个要触发的事件，则无法获取该事件。但它对所有结果都有效。有更好的方法吗？
<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>

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

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