Removing tag code

[KubeR]

Hello,

 

I am trying to create a code which will add and remove tags.

The problem is that the tags aren't being removed and the script isn't working at all.

The browser doesn't return errors and neither JSHint.

 

The code :

var t_t = 0;
$("#t_i").keypress(function (e) {
    var k = e.which;
    if (k == 13 || k == 188) {
        e.preventDefault();
        var tag = $(this).val();
        if (tag.length > 0) {
            t_t++;
            $("<span class=\"tag\" id=\"tag_" + t_t + "\"><font>" + tag + "</font><span class=\"tagcan\" id=\"" + t_t + "\">X</span></span>").insertBefore("#t_");
            $(this).val("");
            var output = $("#t_o").val();
            $("#t_o").val(output + "," + tag);
        }
    }
});
$(".tagcan").click(function () {
    var d = $(this).attr("id"),
        c = $("#tag_" + d),
        a = $("#output").val(),
        b = c.text();
    c.remove();
    a = a.slice(",");
    var e = $.inArray(b, a);
    a = a.splice(e, 1);
    a = a.join(",");
    $("#output").val(a);
});

Live preview : http://jsfiddle.net/rPABN/

 

It adds the HTML code of the tags whenever the user inputs content into the <input> tags and presses 'enter'.

After it the script adds the tag name into hidden <input> which will later pass into the database after submit.

[denno020]

The problem is that when you add the click handler to .tagcan, there aren't any elements with that .tagcan class. When you add a tag, then an element is added with tagcan, however, the click handler doesn't get applied to new elements.

 

What you need to do is attach the click to an element that is on the page from the initial loading.

 

This is how you could do it:

 

//this
$("<span class=\"tag\" id=\"tag_" + t_t + "\"><font>" + tag + "</font><span class=\"tagcan\" id=\"" + t_t + "\">X</span></span>").insertBefore("#t_");
//becomes
$("<span class=\"tag\" id=\"tag_" + t_t + "\"><font>" + tag + "</font><span class=\"tagcan\" id=\"" + t_t + "\">X</span></span>").appendTo("#t_");

Which adds the tags inside of a container.

 

Then update your click like this:

 

$("#t_").on('click', '.tagcan', function() {
  //The content of your function
});

 

See how you go with that

Denno

[KubeR]

Thank you.
works perfectly,about the rest.
I tried to fix it by debugging and alerting the array values,
found that I used slice instead of split,took the value that splice returned instead of just let it stand alone and named #output instead of #t_o.

for those who are interested in the fixed code and/or in need of similar code :

var t_t = 0;
$("#t_i").keypress(function (e) {
    var key = e.which;
    if (key == 13 || key == 188) {
        e.preventDefault();
        var tag = $(this).val();
        if (tag.length > 0) {
            t_t++;
            $("<span class=\"tag\" id=\"tag_" + t_t + "\"><font>" + tag + "</font><span class=\"tagcan\" id=\"" + t_t + "\">X</span></span>").appendTo("#t_");
            $(this).val("");
            var output = $("#t_o").val();
            $("#t_o").val(output + "," + tag);
        }
    }
});
$("#t_").on('click', '.tagcan', function() {
    var d = $(this).attr("id"),
        c = $("#tag_" + d),
        a = $("#t_o").val(),
        b = c.text(),f;
    c.remove();
    a = a.split(",");
    b=b.substr(0,b.length-1);
    var e = $.inArray(b, a);
    a.splice(e, 1);
    a = a.join(",");
    $("#t_o").val(a);
});