Add span's with click events via jQuery

Question

I am trying to add spans to a div via jquery. These spans should have an onclick event. The spans seem to be added, but the newly created elements' click events don't fire. I'm worthless at jQuery and am not sure what I'm missing. Any help is appreciated.

Here is some relevant code:

<script type='text/javascript'>
$(window).load(function(){
     $('#Match .WordSpan').click(function() {
          alert($(this).html());
          $('#Match').append('<span>me too!</span><br/>').html();
          $("span:last").addClass("WordSpan").html();
     });
});
</script>

<input type="text" id="WordInput"  />
<div id="Match">
     <span class="WordSpan">click me!</span><br />
</div>

I have it in a fiddle here.

What I am hoping the code will do is, after clicking on the hard coded "click me" span, another span will be added below. When clicked, that span will add another, saecula saeculorum.

Where have I blown it?

A really tiny thing. But you could clean up your code by using: $('#Match').append('<span class="WordSpan">me too!</span><br/>'); Saving traveling in the DOM. Maybe even using $(this).after('Your new span here'); save you even more power, but I'm not too sure about that. — Filip
– Filip, Commented Dec 1, 2011 at 17:44

amurra · Accepted Answer · 2011-12-01 17:46:21Z

2

Using delegate performs better than using live:

$('#Match').delegate('span.WordSpan', 'click', function() {
    alert($(this).html());
    $('#Match').append('<span>me too!</span><br/>');
    $("span:last").addClass("WordSpan");
});

If using jquery 1.7+ then use on instead of delegate. jsFiddle example

edited Dec 1, 2011 at 17:46

answered Dec 1, 2011 at 17:41

amurra

15.5k5 gold badges75 silver badges90 bronze badges

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

1 Comment

seanicus Over a year ago

3 great answers straight away, but I'm giving you the prize because, according the jQuery docs on ".live", it is deprecated in 1.7 and ".delegate" should be used in older versions. Thanks a lot!

Naftali · Accepted Answer · 2011-12-01 17:36:29Z

2

Try this:

$('#Match .WordSpan').live('click', function()....

Fiddle: http://jsfiddle.net/maniator/kLJ3J/3/

_{^{I also removed those random html()'s at the ends. not sure why you had those there...}}

answered Dec 1, 2011 at 17:36

Naftali

147k41 gold badges247 silver badges304 bronze badges

2 Comments

Greg Pettit Over a year ago

As per the small-type comment, the .html() didn't make sense. Also, since .live() has been deprecated in jQuery 1.7+, here's Neal's code modified to use jQuery 1.7.1 and the .on() function: jsfiddle.net/kLJ3J/8

seanicus Over a year ago

I'm not sure why I did either... just throwing code at the problem, hoping it would go away, I guess..

Community · Accepted Answer · 2017-05-23 12:27:37Z

2

Starting in jQuery 1.7, do this:

 $('#Match').on('click','.WordSpan',function() {
      alert($(this).html());
      $(this).append('<span class="WordSpan">me too!</span><br/>');
 });

before 1.7 (but on or after 1.4.2 as noted by @Greg Pettit) do this:

 $('#Match').delegate('.WordSpan','click',function() {
      alert($(this).html());
      $(this).append('<span class="WordSpan">me too!</span><br/>');
 });

Also, instead of using a <br>, perhaps you could take care of that in your CSS, or by using an element other than span.

If you do that, you could use this form of creating elements:

$('<span>',{className:'WordSpan',text:'me too!'}).appendTo(this);

jQuery has built in optimizations for creating elements this way.

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Dec 1, 2011 at 17:41

RightSaidFred

11.3k38 silver badges36 bronze badges

1 Comment

Greg Pettit Over a year ago

before 1.7 but after... 1.4? .delegate() had a relatively short lifespan.

Klaus Byskov Pedersen · Accepted Answer · 2011-12-01 17:40:52Z

1

Use live:

$('#Match .WordSpan').live("click", function() {
    $('#Match').append('<span class="WordSpan">me too!</span><br/>');
    $("span:last").addClass("WordSpan");
});

answered Dec 1, 2011 at 17:40

Klaus Byskov Pedersen

122k31 gold badges192 silver badges223 bronze badges

Collectives™ on Stack Overflow

Add span's with click events via jQuery

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related