Javascript - Jquery，使用“On”方法绑定动态选择器（不是字符串）答案

【问题标题】：Javascript - Jquery, bind a dynamic selector with 'On' method (not a string)Javascript - Jquery，使用“On”方法绑定动态选择器（不是字符串）
【发布时间】：2012-05-13 23:26:55
【问题描述】：

我想使用“开启”功能附加一个事件，因为其他事件已被贬低（live、delegate、click...）。

但问题是：如果我们生成对象，我们需要在参数中使用选择器，而这个参数是一个字符串！！

示例：（上下文：动态表）

//Wrong way

$("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
});

//Good way

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});

如果我想使用“查找”方法来避免这种情况，我该怎么办

    // ?? (find div)
    $("#dataTable tbody").on("click", "tr > ul > li > ul > li > div", function(event){
            alert($(this).text());
        });

   // What I would like to do
    $("#dataTable tbody").on("click", $(this).find("div"), function(event){
            alert($(this).text());
        });

   //and I don't want to do this :
    $("#dataTable tbody").find('div').on("click", function(event){
            alert($(this).text());
        });

谢谢！

【问题讨论】：

而不是"tr > ul > li > ul > li > div"，只需在 DIV 上设置一个类（顺便说一句，你不能在 TR 中直接有一个 UL）。此外，这闻起来就像您正在使用表格进行布局。
我不使用表格，我只是找到一种简单的方法来显示我的问题。当然，我可以使用 Class、Id... 但我想使用 {parent()、children()、closest()、...} 我该怎么做？
on() 方法的第二个参数是一个选择器字符串。你不能在这里使用 jQuery 方法。它必须是一个字符串。所以要么'ul > li > ul > li > div'，要么只是'ul ul div'，正如我在回答中所写的那样。

标签： jquery events dynamic selector

【解决方案1】：

工作相当于：

// What I would like to do
$("#dataTable tbody").on("click", $(this).find("div"), function(event){
    alert($(this).text());
});

是……

// What I would like to do
$("#dataTable tbody").on("click", 'div', function(event){
    alert($(this).text());
});

如果您在嵌套列表中定位div，那么您可能能够逃脱：

// What I would like to do
$("#dataTable tbody").on("click", 'ul ul div', function(event){
    alert($(this).text());
});

...但这取决于您的tbody 中是否有其他 ul；您只需要在选择器中足够具体，即可将其他元素从考虑范围内移除。很少需要像tr > ul > li > ul > li > div 那样具体，在这种情况下，最好将一个类应用于更接近div（或div 本身）的元素并围绕它进行选择。

另请注意，折旧的只有live()。在撰写本文时 (1.7.2) delegate() 不是，尽管我相信它会在 1.8 中。

没有谈论贬值click() 或它的捷径对应物。

【讨论】：

看来 OP 只想选择嵌套列表中的 DIV 元素（UL 中的 UL）。您的代码选择表中的所有 DIV 元素。
没错，我只想要嵌套列表中的 DIV 元素。 'find' 方法可能是个坏主意……如果我需要使用 children() 或最接近的() 函数。主要目标是：我想使用非常实用的'jQuery选择方法'和动态元素。
@Matt 另外，您的第一个代码块不起作用，因为 $(this) 没有引用 TBODY 元素...
@user988587：我更新了我的问题以解释如何在嵌套的ul 中选择div。
@ŠimeVidas：我在问题中看不到 OP 说过他想要 $(this) 成为TBODY 元素？如果他愿意，他可以使用event.delegateTarget 代替this。

【解决方案2】：

如果你想选择嵌套列表中的 DIV 元素，那么这是一种方法：

$( '#foo' ).on( 'click', 'ul ul div', function () {

但是，我推荐课程。只需在您的 DIV 元素上设置一个类，然后：

$( '#foo' ).on( 'click', '.bar', function () {

【讨论】：