與點擊功能jQuery的不工作

Question

http://jsfiddle.net/CCKUz/

追加HTML所以我有一個<span class="open">一個框，將增加一個可摺疊的div的高度來查看內容。它僅通過CSS高度可摺疊，打開的點擊功能將高度設置爲自動。容易，這個工程。

當我去追加打開和關閉跨度時，問題就發生了。當我將它們包含在實際的html中時，它們工作正常。當我追加它們時，它們不再起作用。我想也許這是由於js無法將.click函數應用於它們，因爲它們是在加載後創建的，但是即使創建它們並將.click應用於同一個函數也不能解決此問題。

有沒有什麼可能會影響到您？謝謝。

HTML：

<div class="box collapsible"> 
    <h3>Title</h3> 
    <p>This is a sample paragraph that is here for placer purposes.</p> 
</div> 

CSS：

.box { height: 20px; border: 1px solid #000000; padding: 10px; margin: 20px; position: relative; overflow: hidden; } 
h3 { margin: 0 0 20px 0; line-height: 20px; } 
.open, .close { text-indent: -9999px; width: 20px; height: 20px; position: absolute; top: 10px; right: 10px; } 
.open { background: #00ff00; } 
.close { background: #0000ff; } 

JS：

$(function(){ 
     var box = $(".collapsible"); 
     var close = $(".collapsible span.close"); 
     var open = $(".collapsible span.open"); 
     box.each(function(){ 
      box.append('<span class="open">Open</span>'); 
      open.each(function(i){ 
       open.click(function(){ 
        alert("You clicked open"); 
        $(this).parent(box).css("height","auto").append('<span class="close">Close</span>'); 
        $(this).hide(); 
        $(this).parent().find(close).show(); 
       }); 
      }); 
      close.each(function(i){ 
       close.click(function(){ 
        $(this).parent(box).css("height","15px"); 
        $(this).hide(); 
        $(this).parent().find(open).show(); 
       }); 
      }); 
     }); 
    }); 

Answer 1

無需環路，jQuery不會在內部，你需要委託具有動態元素的事件處理程序，如下所示：

$(function() { 
    var box = $(".collapsible"); 
    box.append($('<span />', {'class':'open'})) 
     .on('click', '.close', function() { 
     $(this).hide() 
       .closest('.collapsible') 
       .css("height", "auto") 
       .append($('<span />', {'class':'close'}).show()); 
    }) 
     .on('click', '.close', function() { 
      $(this).hide() 
       .closest('.collapsible') 
       .css("height", "15px") 
       .find('.open').show(); 
    }); 
}); 

Answer 2

沒有必要爲.each委託功能

$(document).on('click','.collapsible span.open',function(){ 

演示這裏http://jsfiddle.net/CCKUz/2/

Answer 3

你加入他們之前選擇的開放元素：

var open = $(".collapsible span.open"); 

試試這個：

$(function(){ 
     var box = $(".collapsible"); 
     var close = $(".collapsible span.close"); 

     box.each(function(){ 
      box.append('<span class="open">Open</span>'); 
      var open = $(".collapsible span.open"); //do it here!! 
      open.each(function(i){ 
       open.click(function(){ 
        alert("You clicked open"); 
        $(this).parent(box).css("height","auto").append('<span class="close">Close</span>'); 
        $(this).hide(); 
        $(this).parent().find(close).show(); 
       }); 
      }); 
      close.each(function(i){ 
       close.click(function(){ 
        $(this).parent(box).css("height","15px"); 
        $(this).hide(); 
        $(this).parent().find(open).show(); 
       }); 
      }); 
     }); 
    }); 

Answer 4

問題是，您正在動態添加您的.close跨度，所以您的初始搜索不會找到任何內容，因此它不會向它們添加任何點擊處理程序。你可以使用事件委託來解決這個問題。

.on('click', 'span.close', function(evt){ 

您還可以簡化代碼很多：

$(".collapsible") 
    .append('<span class="open">Open</span>') 
    .on('click', 'span.open', function(evt){ 
    // Search within the parent '.collapsible'. 
    $(evt.delegateTarget) 
     .css("height", "auto") 
     .append('<span class="close">Close</span>'); 

    // Hide the '.open' span. 
    $(this).hide(); 
    }) 
    .on('click', 'span.close', function(evt){ 
    // Search within the parent '.collapsible'. 
    $(evt.delegateTarget) 
     .css("height","15px"); 
     .find('.open').show(); 

    // Remove the old '.close' button since the 
    // open handler will make a new one. 
    $(this).remove();  
    })