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

Question

我需要为动态加载的元素创建on Click功能。此元素的ID位于变量$element中。该ID存储一个字符串。我把它传递给.on事件处理程序是这样的：

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

它不工作，并给出了一个错误Uncaught Error: Syntax error, unrecognized expression: "#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

从你的小提琴，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'); 
     } 
    ); 

请注意，IDS 应该不以数字开头，at least in 4 times。