jQuery找不到合適的選擇器

Question

我使用jQuery將div附加（移動）到另一個div。這工作正常，但現在我試圖讓它成爲一個功能，我遇到了一些問題。

我有幾個div的，有兩個叫#geregeld和#niet_geregeld。一個叫做#content_vragen和一個叫做.container_vragen的class。

.container_vragen初始位於#content_vragen。在.container_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); 
      }); 
     }); 

此動作將.container_vragen在#geregelddiv。這工作正常。但我希望用戶能夠將.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); 
    }); 

如果我用這個代碼，我不得不在#geregeld在.container_vragen點擊兩次，以獲得功能appendToContent_vragen，顯然我希望用戶點擊一次。

我小的jsfiddle與我正在使用的代碼：http://jsfiddle.net/hE7Gm/

Answer 1

我越來越所有荷蘭困惑，但在此塊：

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

你也許有兩個問題。首先是.click的內部調用不會點擊，但是註冊了一個新的點擊處理程序，就像.on('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); 
    }); 
}