Remove dynamically created textbox using jquery

Question

I have created a textbox with save and delete buttons dynamically; how can I make it function? Here is my coding:

$("#canvas").click(function (e) {
    var offset = $(this).offset();
    $("#position").text((e.clientX - offset.left) + ", " + (e.clientY - offset.top));
    $("#position").empty();

    var input = $("<input type='text' value='' class='addtext' id='addText'>");
    var save = $("<input type='button' class='save' value='save' id='save'>");
    var discard = $("<input type='button' class='discard' value='discard' id='disc'>");
    $("#position").append(input);
    $("#position").append(save);
    $("#position").append(discard);
    $("#position").css('position', 'absolute');
    $("#position").css('left', e.clientX - offset.left);
    $("#position").css('top', e.clientY);

    var xcor = $("#x-text");
    var ycor = $("#y-text");
    var ctext = $("#content-text");
    var atext = $("#addText");
});

If I use the below code inside $("#canvas").click(function(e){ it works fine, but how can i use it as a separate function. Where am I wrong?

$('.discard').click(function () {
    alert('test');
    $('#position').empty();
});

$('.save').click(function () {
    ctext.val(atext.val());
    xcor.val(e.clientX - offset.left);
    ycor.val(e.clientY);
    $(this).parent().empty();

});

Answer 1

you need to make the variables available in other functions. If you create a variable within the canvas' click function, those vars are only available within this click function. Decline the variables outside the click function or make them global:

$("#canvas").click(function(e){

                var offset = $(this).offset();
                $("#position").text((e.clientX - offset.left) + ", " + (e.clientY - offset.top));
                $("#position").empty();
                var input = $("<input type='text' value='' class='addtext' id='addText'>");
                var save = $("<input type='button' class='save' value='save' id='save'>");
                var discard = $("<input type='button' class='discard' value='discard' id='disc'>");
                $("#position").append(input);
                $("#position").append(save);
                $("#position").append(discard);
                $("#position").css('position', 'absolute');
                $("#position").css('left', e.clientX - offset.left);
                $("#position").css('top', e.clientY);
                xcor = $("#x-text"); // global var
                ycor = $("#y-text"); // global var
                ctext = $("#content-text"); // global var
                atext = $("#addText"); // global var

        });

OR:

var xcor = $("#x-text");
                    var ycor = $("#y-text");
                    var ctext = $("#content-text");
                    var atext = $("#addText");

$("#canvas").click(function(e){

                        var offset = $(this).offset();
                        $("#position").text((e.clientX - offset.left) + ", " + (e.clientY - offset.top));
                        $("#position").empty();
                        var input = $("<input type='text' value='' class='addtext' id='addText'>");
                        var save = $("<input type='button' class='save' value='save' id='save'>");
                        var discard = $("<input type='button' class='discard' value='discard' id='disc'>");
                        $("#position").append(input);
                        $("#position").append(save);
                        $("#position").append(discard);
                        $("#position").css('position', 'absolute');
                        $("#position").css('left', e.clientX - offset.left);
                        $("#position").css('top', e.clientY);


                });

Answer 2

The problem is that your variables are scoped to the click callback function. You need to expose them somehow. One possible way would be to have an object hold them. Also, if you are going to be attaching these events at runtime you might want to also do that in the click event. Note that I cached the position element and prefaced it with $ . This is because it is best practice to name your jQuery objects starting with a $ so that it is obvious which have access to the jQuery API.

var ctxObj = {};
$("#canvas").click(function(e){
 var offset = $(this).offset();
 var $position = $("#position");
 $position.text((e.clientX - offset.left) + ", " + (e.clientY - offset.top)).empty();
 var $input = $("<input type='text' value='' class='addtext' id='addText'>");
 var $save = $("<input type='button' class='save' value='save' id='save'>");
 var $discard = $("<input type='button' class='discard' value='discard' id='disc'>");
 $position.append($input).append($save).append($discard);
 $position.css({position:'absolute',left:(e.clientX - offset.left),top:e.clientY});
 ctxObj.xcor = $("#x-text");
 ctxObj.ycor = $("#y-text");
 ctxObj.ctext = $("#content-text");
 ctxObj.atext = $("#addText");
 $save.click(function(){
  ctxObj.ctext.val(atext.val());
  ctxObj.xcor.val(e.clientX - offset.left);
  ctxObj.ycor.val(e.clientY);
  $(this).parent().empty();
 });
 $discard.click(function(){ 
  alert('test');
  $('#position').empty();
 });
});