Appending HTML with click function jQuery not working

Question

So I have a box with a <span class="open"> that will increase the height of a collapsible div to view the content. It's collapsible simply by CSS height and the open click function sets height to auto. Easy and this works.

The problem happens when I go to append the open and close spans. When I include them in the actual html, they work fine. When I append them, they no longer function. I thought maybe this was due to not being available for the js to apply the .click function to them since they were created after the load but even creating them and applying the .click in the same function doesn't help this problem.

Is there anything you see there that might be affecting this? Thanks.

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

adeneo · Accepted Answer · 2013-02-18 15:34:57Z

2

No need for loops, jQuery does that internally, and you need delegated event handlers with dynamic elements, like so:

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

edited Feb 18, 2013 at 15:34

answered Feb 18, 2013 at 15:29

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

o_O Over a year ago

It looks like all of these work but I did go with this one. I separated the close function actions to remove .close instead of hiding it. That way, every time the open.click function is called it isn't appending another close. (Well, it is appending another one but the previous one is now removed.) Thanks for your help.

El Hocko · Accepted Answer · 2013-02-18 15:29:32Z

you select the open-elements before adding them:

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

Try this:

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

Anton · Accepted Answer · 2013-02-18 15:27:18Z

0

There is no need for .each delegate the function

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

demo here http://jsfiddle.net/CCKUz/2/

answered Feb 18, 2013 at 15:27

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Comments

loganfsmyth · Accepted Answer · 2013-02-18 15:34:40Z

The problem is that you are adding your .close spans dynamically, so your initial search will not find anything, so it will not add any click handlers to them. You can use event delegation to fix this easily.

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

You can also simplify your code a lot:

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

Collectives™ on Stack Overflow

Appending HTML with click function jQuery not working

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related