Question

我遇到以下jquery代码的问题。

$(document).ready(function() {

$(".box").submit(function(e) {       
      e.preventDefault();
        var input_value = $(".textbox").val();
        $("<li>"+ input_value +" <br /> <form class='box'><input type='text' name='textbox' class='textbox reply'></form> <ul class='list'></ul></div></li>")
        .prependTo($(this).siblings('.list').first());
    });
});

当我将preTo（）添加到现有HTML时，一切正常，但是一旦我尝试将preTo（）添加到由javascript创建的元素，我就会遇到错误。

我创建了以下jsfiddle来说明

Answer 1

您需要使用事件委派。因此改变

$(".box").submit(function(e) {

到

$(document).on("submit", ".box", function (e) {

能够利用on()使用jQuery 1.7或更高版本

要从新插入的字段中正确获取值，也要更改

var input_value = $(".textbox").val();

到

var input_value = $(this).find(".textbox").val();

<强> jsFiddle

Answer 2

由于您使用的是jQuery 1.6.4，因此使用.live()使用事件委派。如果您使用的是jQuery＆gt; = 1.7则使用.on()代替

$(document).ready(function() {

    $(".box").live('submit', function(e) {   
        e.preventDefault();
        var input_value = $(".textbox").val();
        $("<li>"+ input_value +" <br /> <form class='box'><input type='text' name='textbox' class='textbox reply'></form> <ul class='list'></ul></div></li>")
        .prependTo($(this).siblings('.list').first());
    });
});

演示：Fiddle

Answer 3

这是因为新创建的元素尚未推送到DOM中。你需要首先推送DOM中的元素（我的意思是做类似.html（）的事情，所以元素现在存在于DOM中）并且在这样做之后你可以使用prependTo()来创建新元素

在prepend元素中添加前缀

3 个答案: