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() { ... 

을하지만 (Case 2 JSFiddle 참조) 클릭 할 수있는 요소로 전체 DOM을 설정하는 것 같다. 왜...? 사용자가 ID #2를 가진 요소를 클릭하면, 그녀는 ID #3와 요소를 클릭하거나 다른 곳, 아무 일도 발생하지 않으면 뭔가 일 :

마지막으로, Case 3 JSFiddle 내가 원하는 동작을 보여줍니다. 선택기가 변수로 전달 될 때 작동하지 않습니다.

---

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 숫자로 시작되지 않도록 유의하시기 바랍니다.