jQuery가 올바른 선택자를 찾을 수 없습니다.

Question

div을 다른 div에 추가 (이동)하기 위해 jQuery를 사용하고 있습니다. 이것은 잘 작동하지만 지금은 함수로 만들려고 노력 중이며 몇 가지 문제가 있습니다.

나는 #geregeld 및 #niet_geregeld이라는 두 개의 div을 가지고 있습니다. 하나는 #content_vragen 및 class은 .container_vragen이라고합니다.

.container_vragen은 처음에 #content_vragen에 삽입됩니다.

이

$('.submenu').on('click','.groen',function() { 
      $(this).closest('.container_vragen').fadeOut(400, function() { 
       $(this).closest('.container_vragen').css({overflow : 'hidden', color : 'green'}); 
       $(this).closest('.container_vragen').appendTo("#geregeld"); 
       $(this).closest('.container_vragen').fadeIn(400); 
      }); 
     }); 

이 작업은 #geregelddiv에 .container_vragen을두고 다음 .container_vragen에서이 코드 버튼입니다. 이것은 잘 작동합니다. 하지만 사용자가 .container_vragen을 #content_vragendiv에 다시 넣을 수 있기를 원합니다. 문제가되는 것으로 확인되었습니다.

function appendToContent_vragen() { 
     $(this).closest('.container_vragen').fadeOut(400, function() { 
      $(this).closest('.container_vragen').appendTo('#content_vragen'); 
      $(this).closest('.container_vragen').css({overflow : 'hidden', color : 'black'}); 
      $(this).closest('.container_vragen').fadeIn(400); 
     }); 
    } 

이 또한 작동합니다

내가 그렇게 사용하고 코드는 다음입니다. 문제는 #geregeld div에서 올바른 div를 선택하는 것입니다. 이 코드를 사용하는 경우

$('#geregeld , #niet_geregeld').on('click',function(){ 
     $('.container_vragen', this).click(appendToContent_vragen); 
    }); 

나는 기능 appendToContent_vragen에 도착 #geregeld에 .container_vragen 두 번 클릭해야하고 분명히 나는 ​​사용자가 한 번만 클릭합니다.

은 내가 사용하고 코드 작은 jsFiddle이 : http://jsfiddle.net/hE7Gm/

Answer 1

나는 모든 네덜란드 혼란지고있어, 그러나이 블록 :

$('#geregeld , #niet_geregeld').on('click',function(){ 
    $('.container_vragen', this).click(appendToContent_vragen); 
}); 

당신은 아마 두 가지 문제가있다. 첫 번째는 .click의 내부 호출은 클릭을하지 않지만 은 처럼 새 클릭 핸들러를 등록한다는 것입니다. 그 사이트가 실제로해야 할 일을 말할 수 없기 때문에 이것이 진짜 문제인지 아닌지 나는 말할 수 없습니다.

두 번째 문제는 appendToContent_vragen이 호출 될 때 this으로 설정하는 것입니다. 내가 생각으로, 당신은 단지 (두 번째 클릭없이) 즉시

$('#geregeld, #niet_geregeld').on('click', function() { 
    $('.container_vragen', this).each(appendToContent_vragen); 
}); 

이 작동하는 함수를 호출하려면 .each 현재 요소와 동일한 this와 함께 제공되는 함수를 호출하기 때문이다.

또한, 애니메이션 기능에 모든 .closest() 통화에 대한 필요가 없습니다 - 당신이 이미 전달 된 요소가 .container_vragen 것을 알고, 그래서 다음 응 답에 대한

function appendToContent_vragen() { 
    $(this).fadeOut(400, function() { 
     $(this).appendTo('#content_vragen') 
       .css({overflow : 'hidden', color : 'black'}) 
       .fadeIn(400); 
    }); 
}