多个 jquery 选择器

Question

感谢 karim79 我能够单击 ImageButton 并将 Jquery 高亮效果应用于不同的 div

$("#btnFavorite").click(function() {
    // selector for element to highlight
    $("#theDiv").effect("highlight", {}, 3000);
});

现在我想将问题扩展如下。

我动态地将 ImageButtons 添加到网页，并且我想在每次 ImageButton 点击时将效果应用到 div 上。

     <asp:ListView ID="ListView1" runat="server">
        <layouttemplate>
            <asp:PlaceHolder id="itemPlaceholder" runat="server" />
        </layouttemplate>
        <ItemTemplate> 
        <asp:ImageButton ID="btnFavorite" runat="server" ImageUrl="~/Images/Favorite.png"/>
        </ItemTemplate>
    </asp:ListView>

这种情况我该怎么办？通过使用列表视图的 ItemDataBound 并添加属性 像

btnFavorite.Attributes.Add("onmouseclick", "doSomething") 或者什么？

我完全迷路了！

Answer 1

您可以尝试像这样的更通用的选择器...

$("input[type='image']").click(function(){
    $(".. related div selector ..").effect("highlight", {}, 3000);
});

我不知道 div 和 input 之间的关系，所以我无法假设选择器是什么，但是如果您发布关系或解释它，我们可以帮助您编写更准确的选择器。

值得注意的是，如果您在 DOM 加载后将 ImageButton 动态添加到页面而不是在服务器端，那么您可能需要使用 live 用于附加事件的方法...

$("input[type='image']").live('click', function(){
    $(".. related div selector ..").effect("highlight", {}, 3000);
});

Answer 2

只需将名为 class 的属性添加到您想要具有此效果制作器功能的 ImageButtons 中，并为其指定一个名称，例如 effectMaker。然后调用相同的函数，但将选择器更改为

$(".effectMaker").click(function() {
    // selector for element to highlight
    $("#theDiv").effect("highlight", {}, 3000);
});

使用 . 选择器后跟 stringValue，您可以引用具有以该 stringValue< 值表示的类的每个元素/em>。

Answer 3

有人说委托功能比实时功能更好：

http://test.kingdesk.com/jquery /bind_live_delegate.php

Answer 4

我不知道这是否适合您，但我所做的是：

$("#<%= ListView1.ClientID %>").find(".ImageButtonTarget").click(function() {
   ..
});

我为我的按钮控件提供一个唯一的类来查找它，并批量解析整个列表视图。我不确定是否有一个或多个 div，但如果 div 位于 listview 行中，您还可以使用父项的组合并 find 也从 ListView 行中获取该 div。

这也将范围限制在 ListVIew 内；选择器不必解析整个页面来查找图像按钮，只需在列表中即可。

HTH。

Answer 5

这会将effect()应用于“theDiv”容器中“image”类型的每个输入：

$('#theDiv').find('input[type="image"]').effect('highlight', {}, 3000);

或者，这会将其应用于每个输入类型图像点击上的“theDiv”：

$('input[type="image"]').click(function() {
  $('#theDiv').effect('highlight', {}, 3000);
});

不确定您要执行哪一个。