Trouble interacting with add span inside span - jQuery

Question

First question here! I'm trying to create a mail system and now working on setting up the list of receivers. I am adding the names of the users to a span, and want to remove users by clicking the name.

<span id="to"></span>

my script:

$("#auto").autocomplete($("#base_uri").val()+'search',{
        req_type: "POST",
        minChars: 1,
        delay: 200
        }).result(function(event, data, formatted) {
                if($("#to").html() == ''){
                    $("#to").prepend('<span id="'+data[1]+'">'+formatted+'</span>');
                }
                else {
                    $("#to").prepend('<span id="'+data[1]+'">'+formatted+', '+'</span>');
                }
                $("#fake_to").val($("#fake_to").val()+ data[1] +', ');
                $("#auto").val('');
        });

$("#to span").click(function(){
        $(this).hide();
    });

data[1] and formatted are strings containing names.

I thought this approach would add spans which could be hidden by clicking them. Somehow this isn't the case. Hiding is not done when clicking the text in the add span..

Help would be most appreciated! =)

score 2 · Accepted Answer · answered Jun 24 '11 at 23:24

2

This should work:

$("#to").delegate('span', 'click', function() {
   $(this).hide();
});

I would suggest using .delegate() over .live() since you can specify a context the listening event gets attached to, where .live() attaches the event to the document itself.

answered Jun 24 '11 at 23:24

Björn

2,638
16
18

Thank you for understanding `live` vs `delegate`. I wish we could auto-correct every answer given here on SO that uses `live` to `delegate`. – Levi Morrison Jun 24 '11 at 23:28

score 0 · Answer 2 · answered Jun 24 '11 at 23:16

0

You need to change :

$("#to span").click(function(){
        $(this).hide();
    });

to :

$("#to span").live('click',function(){
        $(this).hide();
    });

The .click binding only binds to the spans that were in existence when the code was executed. .live applies also to any instances created in the future.

answered Jun 24 '11 at 23:16

Variant

17,279
4
40
65

-1 **DO NOT USE LIVE!** Why is this such a prevalent technique? Use `delegate` instead: `$('#to').delegate('span','click',function(){$(this).hide()});` – Levi Morrison Jun 24 '11 at 23:20
@Levi, what should live be used for? jquery states that delegate is an alternative to live: `Delegate is an alternative to using the .live() method, allowing for each binding of event delegation to specific DOM elements.` – jk. Jun 24 '11 at 23:23
`delegate` gives `live` context. In `live`, the event bubbles up document, whereas `delegate` only bubbles up until it hits the parent selector, in this case, `$('#to')`. See http://stackoverflow.com/questions/4204316/jquery-live-vs-delegate for information on why this matters. – Levi Morrison Jun 24 '11 at 23:26
@Levi - it's not *only* that, the initial selector in `.live()` is performed then thrown away...all that was needed in the selector string, so it's *never* the ideal solution...even `$(document).delegate(selector, event, func);` is better than `$(selector).live(event, func);` – Nick Craver Jun 25 '11 at 10:19

Trouble interacting with add span inside span - jQuery

2 Answers2