Question

I’m having a problem maybe an inexperience of using global variable which causes some problem.

Please check this http://jsfiddle.net/ZgXKx/ When you click the click me! I am dynamically setting up the id for some elements using the global variable.

I’m having problem with this code:

$("#service-sets").on('click', "#facebook-del-"+a, function() {           
    var aa = $("#facebook-del-"+a).parent().parent().parent().attr("id");
    $('#'+aa).remove();

where it is not entering into the click event because "#facebook-del-"+a in .on('click') is not working, whereas the one inside the click event is working(showing the value "#facebook-del-1").

When I changed the code like this, It has no problem

$("#service-sets").on('click', "#facebook-del-1", function() {           
    var aa = $("#facebook-del-"+a).parent().parent().parent().attr("id");
    $('#'+aa).remove();

You can check it out here http://jsfiddle.net/ZgXKx/1/

So what is the mistake I’ve done?

Thanks!

Answer 1

$("#service-sets").on('click', "[id^=facebook-del]", function() {          
    $(this).closest('div.tag').remove();
});

DEMO

Here,

[id^=facebook-del] is those element (cross), who’s id start with facebook-el. So set delegate event like this will not need any indexing with global variable a.

$(this).closest('div.tag') target to div.tag, which is container of clicked cross.