与点击功能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();  
    })