Appending and manipulating elements

Question

Please see the my test site here.

The script is written in the <head> so you will be able to see it there.

Instructions

If you click the blue area a new element will be made. Do this four or five times. Now click all the elements you've just created. They should all have a black outline. However, some do and some don't.

Additional Info:

Only tested on chrome so far.

Any ideas on what's going wrong here?

Depending on the # of bubbles created, it adds the class only to even or odd bubbles. Looking at the source, I think it has something to do with not setting the active class before you remove it. — Jason Gennaro
– Jason Gennaro, Commented Jul 12, 2011 at 19:54

katspaugh · Accepted Answer · 2011-07-12 19:54:57Z

1

You are adding the click listener to all bubbles each time a new one is created.

Add the listener once with the live listener. It can be set before any of the bubbles are created.

And don't use numeric id attributes, it's disallowed by HTML.

Also, you are toggling the active class -- there's a shorter function for this -- toggleClass.

answered Jul 12, 2011 at 19:54

katspaugh

18k12 gold badges69 silver badges107 bronze badges

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

Comments

katspaugh · Accepted Answer · 2011-07-13 00:25:53Z

You can simplify using this:

$(function () {
  // CREATE A NEW BUBBLE

  $('.drop').click(function(event){
    Bubble(event);
  });

  var newBubbleId = 0;
  function Bubble(event,bubbleClass){
    // Create Element
    var id = newBubbleId++;
    var bubble = $('<div class="bubble" id="b_'+id+'" draggable="true"><input id="bubbleText" type="text" name="text" value="'+id+'" /></div>');
    $('body').append(bubble);

    // Position Element
    var bubbleWidth = bubble.width();
    var bubbleHeight = bubble.height();
    var x = event.pageX - (bubbleWidth*0.5);
    var y = event.pageY - (bubbleHeight*0.5);
    bubble.offset({top:y, left:x});
    bubble.click(function () {
      $(this).toggleClass("active");
    });
  }

});

I see a few other issues. Number ids as mentioned before. Also, all your input elements have the same ID, that is not allowed. One ID per document only. You can use the Name attribute if you want them to have the same name.

Also, your counter function isn't ideal.

But this should solve your problem.

Thanks, a very valid and simple solution. I know, my code's really sloppy at this point, will have a tidy up.

Collectives™ on Stack Overflow

Appending and manipulating elements

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related