javascript - jQuery .on 事件不适用于变量选择器

Question

我需要创建on Click动态加载元素的功能。该元素的 ID 位于变量 $element 中。 ID 以字符串形式存储。我将其传递给 .on 事件处理程序，如下所示:

... .on("click", '"'+$element+'"', function() { ...

它不起作用并给出错误未捕获错误:语法错误，无法识别的表达式:“#2”(请参阅 Case 1 JSFiddle )。 #2 是元素的 ID。

然后我尝试将其包装在这样的函数中:

... .on("click", function() {'"'+$element+'"'}, function() { ...

但它似乎将整个 DOM 变成了可点击的元素(参见 Case 2 JSFiddle )。为什么……？

最后，Case 3 JSFiddle显示我想要的行为:如果用户单击 ID 为 #2 的元素，则会发生某些情况，如果她单击 ID 为 #3 的元素或其他任何地方，则不会发生任何情况。当选择器作为变量传递时，我无法让它工作。

<小时/>

Case 1 JSFiddle给出一个奇怪的错误。

Case 2 JSFiddle单击“a”或“b”，“a”将变为红色。

Case 3 JSFiddle这就是我所追求的。单击“a”，它变成红色，单击“b”没有任何反应。

Answer 1

从你的 fiddle ，have a look at this :

var $element = '#a2';

$("#a1").on(
        "click",
        $element,       // <-- child Selector
        function() {
            $("#a1")
            .find('span')
            .filter(function() {
                return $(this).text() === 'a';
            })
            .css('background-color', 'red');
        }
    );

请注意，id不应以数字开头，at least in 4 times .