Question

我创建了一个动态保存和删除按钮的文本框;我怎样才能使它发挥作用？这是我的编码：

$("#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");
});

如果我在$("#canvas").click(function(e){中使用以下代码，它可以正常工作，但我如何将其用作单独的函数。我哪里错了？

$('.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

您需要在其他函数中使变量可用。如果在画布的“单击”功能中创建变量，则这些变量仅在此单击函数中可用。拒绝点击函数之外的变量或使它们成为全局变量：

$("#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

问题是您的变量的作用域是单击回调函数。你需要以某种方式揭露它们。一种可能的方法是让一个物体抓住它们。此外，如果您要在运行时附加这些事件，您可能还希望在click事件中执行此操作。请注意，我缓存了position元素，并以$为前缀。这是因为最佳做法是以$开头命名jQuery对象，以便明显可以访问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();
 });
});

使用jquery删除动态创建的文本框

2 个答案: