2014-09-06 55 views
0

我想在網站做一個標籤過濾功能。從一個div轉移到另一個工作。但將其傳回不起作用。JavaScript的傳輸和元素從1 div到另一個

這是我的html:

<h4>Video Tags</h4> 
<div id="tagbox-1"> 
    <span class="tag-filter">tag 1</span> 
    <span class="tag-filter">tag 2</span> 
    <span class="tag-filter">tag 3</span> 
</div> 
<h4>Video Filters</h4> 
<div id="tagfilter-1"> 
</div> 

然後,這是我的JavaScript/jQuery的:

function tag_ui_move(tag_object,filter_move_to){ 
    $(filter_move_to).append($(tag_object)).fadeIn(); 
    $(tag_object).remove(); 
} 
$(document).ready(function(){ 
    var stored_tag = []; 
    $('[id^="tagbox-"] > span').each(function(){ 
     $(this).click(function(){ 
      tag_ui_move(this,'div[id^="tagfilter-"]'); 
     }); 
    }); 

    $('div[id^="tagfilter-"] > span').each(function(){ 
     $(this).click(function(){ 
      tag_ui_move(this,'div[id^="tagbox-"]'); 
     }); 
    }); 
}); 

這是一個很值得我的HTML和代碼的要點。我簡化了它,因爲tagbox和tagfilter更多。

回答

1

的問題是,$('[id^="tagbox-"] > span')會選擇所有在那一刻存在於tagbox ,然後綁定一個click處理他們每個人,它移動到過濾器的div標籤span元素。然後$('div[id^="tagfilter-"] > span')選擇存在於過濾器div 那一刻的所有標記跨度元素沒有任何。所以沒有處理器綁定移回元素。

也沒有必要使用一個.each()循環單獨綁定.click()對循環中的每個元素:你可以撥打.click()直接將處理程序綁定到符合您選擇的所有元素。

的解決方案是使用一個委派處理程序,其中,使用.on()綁定點擊到父div元素但提供次級選擇器jQuery將自動在點擊事件發生的時間進行測試:

function tag_ui_move(tag_object,filter_move_to){ 
    $(filter_move_to).append(tag_object).fadeIn(); 
    //$(tag_object).remove(); <-- commented out: don't remove the element, 
           // because append *moves* it 
} 
$(document).ready(function(){ 
    var stored_tag = []; 
    $('[id^="tagbox-"]').on('click', 'span.tag-filter', function(){ 
      tag_ui_move(this,'div[id^="tagfilter-"]'); 
    }); 

    $('div[id^="tagfilter-"]').on('click', 'span', function(){ 
     tag_ui_move(this,'div[id^="tagbox-"]'); 
    }); 
}); 

這樣,當點擊'[id^="tagbox-"]'中的任何元素時,jQuery會測試目標元素是否與選擇器'span.tag-filter'匹配,並且當且僅當它調用您的處理函數時。因此,即使在兩個父div之間動態移動時,這些點擊仍然可以處理這些元素。

演示:http://jsfiddle.net/6m4aac3k/

+0

感謝引進。對()給我 – taptipblard 2014-09-07 06:38:10

0

HTML

<h4>Video Tags</h4> 
<div id="tagbox"> 
    <span class="tag-filter">tag 1</span> 
    <span class="tag-filter">tag 2</span> 
    <span class="tag-filter">tag 3</span> 
</div> 
<h4>Video Filters</h4> 
<div id="tagfilter"> 
</div> 

的Javascript

function tag_ui_move(tag_object,filter_move_to){ 
    $(filter_move_to).append($(tag_object)).fadeIn(); 
} 
$(document).ready(function(){ 
    $(".tag-filter").click(function(){ 
     var inTagBox=$(this).parent("#tagbox").length>0; 
     var moveTo=inTagBox ? '#tagfilter' : '#tagbox'; 
     tag_ui_move(this,moveTo); 
    }); 
}); 

的jsfiddle

Tag filter

相關問題