Question

我有这个简单的HTML代码：

<div id="new_gallery">
    <p id="add_gallery">Add new gallery</p>
</div>

和jQuery代码：

<script>
    $("#add_gallery").click(function() {
        $("#new_gallery").append('<input name"new_gallery" /><a href="#" id="create_new_gallery">Add</a>');
        $(this).remove();
    });

    $("#create_new_gallery").on('click', function(){
        alert('1'); 
    });
</script>

第一个功能正在运行，但第二个功能不正常。我需要创建新的input元素，通过ajax发送数据，然后删除input元素并再次附加p元素。我怎么能这样做？

Answer 1

当第二个语句运行时，元素#create_new_gallery尚不存在，因此它什么都不做。

例如，在创建元素后可以对click事件进行绑定，这可以确保元素存在于DOM中：

$("#add_gallery").click(function() {
    $("#new_gallery").append('<input name="new_gallery" /><a href="#" id="create_new_gallery">Add</a>');
    $(this).remove();
    $("#create_new_gallery").on('click', function() {
        alert('1');
    });
});

<强> DEMO

这是一个更优化的版本。附加一个元素并且必须重新查询它是没有意义的（事件虽然通过id查询是最快的方法。此外，它最好使用jQuery的链接功能：< / p>

$("#add_gallery").click(function() {
    var $gallery = $("#new_gallery");

    $('<input name="new_gallery" />').appendTo($gallery);
    $('<a href="#" id="create_new_gallery">Add</a>')
        .on('click', function() {
            alert('1');
        })
        .appendTo($gallery);

    $(this).remove();
});

<强> DEMO

Answer 2

绑定其click事件时

#create_new_gallery不存在。

以下是您的代码应该是什么样的：

$("#add_gallery").click(function() {
  var newG = $("#new_gallery");
  $('<input name"new_gallery" />').appendTo(newG);
  $('<a href="#" id="create_new_gallery">Add</a>').appendTo(newG).on('click',
    function() {
      alert('1');
    });

  $(this).remove();
});

请注意，将$("#new_gallery")放入变量可以避免两次查找。

Answer 3

$(document).ready(function () {
    $("#add_gallery").click(function() {
        $("#new_gallery").append('<input name"new_gallery" /><a href="#" id="create_new_gallery">Add</a>');
        $(this).remove();
        $("#create_new_gallery").on('click', function(){
           alert('1'); 
        });
    });
});

DEMO：http://jsfiddle.net/39E4s/2/

Answer 4

尝试使用live来处理为页面加载后添加的元素触发的事件。

$("#create_new_gallery").live('click', function(){
   alert('1'); 
});

http://api.jquery.com/live/

Jquery附加input元素并从该input元素发送数据

4 个答案: