javascript - 使用点击功能 jQuery 附加 HTML 不起作用

Question

http://jsfiddle.net/CCKUz/

所以我有一个盒子，上面有 <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 在内部完成此操作，并且您需要带有动态元素的委托(delegate)事件处理程序，如下所示:

$(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();
    });
});