使用jquery和onclick事件追加文本

Question

我试图得到"$(newList).click(function)…"下面的工作。

这是"列表"创建器的一部分，首先当用户点击"创建列表"按钮时，会创建一个带有保存按钮的输入。这个输入是下面代码中的newList变量。保存按钮应该出现在输入文本中，作为页面上的h1标题。

现在，当你在输入栏中输入一些东西并点击"保存"时，什么也没有发生。

请在这里查看整个代码片段:http://jsfiddle.net/aortic/4Uhrt/1/。谢谢!

$(document).ready(function(){
  var newList = '<p class="nameList">NAME THE LIST</p><input type="text" name="list"    id="listName"><a href="#newModule" class="save">SAVE</a>';
  var dragItems = '<p class="dragItems">DRAG ITEMS IN HERE</p>';
  $("#createList").click(function(){
    $(this).remove();
    $("#newModule").append(newList);
  }); 
  $(newList).click(function(){
    $(this).remove();
    $("#newModule").append("<h1>" +$("#listName").val()+"</h1>");
    $("#listName").val("");
  });
});

Answer 1

看这里

$(document).ready(function(){
    var newList = '<div class="add"><p class="nameList">NAME THE LIST</p><input type="text" name="list" id="listName" class="listName"><a href="#newModule" class="save">SAVE</a></div>';
    var dragItems = '<p class="dragItems">DRAG ITEMS IN HERE</p>';
    $("#createList").click(function(){
      $(this).hide();
      $("#newModule").append(newList);
    }); 
    $(document).on('click', '.save', function(){
        $("#newModule").append("<h1>" +$("#listName").val()+"</h1");
        $('.add').remove();
        $('#createList').show();
    });
});

我将不得不运行更多的测试，但工作…

Answer 2

你不能在jQuery中这样放置项

$ (newList) .click(函数()

你需要在css中添加id或class来获取项目实例。现在你把html放到newList变量

Answer 3

我将像这样使用事件委托:

$(document).ready(function () {
    var newList = '<div><p class="nameList">NAME THE LIST</p><input type="text" name="list" id="listName"><a href="#newModule" class="save">SAVE</a></div>';
    var dragItems = '<p class="dragItems">DRAG ITEMS IN HERE</p>';
    $("#createList").click(function () {
        $(this).remove();
        $("#newModule").append(newList);
    });
    $(document).on('click', '.save', function () {
        $("#newModule").append("<h1>" + $("#listName").val() + "</h1>");$(this).closest('div').remove();
    });
});

<<p> jsFiddle例子/strong>