jquery无法使用刚刚通过ajax添加的dom元素[重复]

Question

我对 jquery ajax 有疑问。当我使用 ajax 添加新元素时，我无能为力。这是我的代码：

$(".yorum_input").keypress(function(e) {

  if (e.keyCode == 13) {
    e.preventDefault();
    var alt_id = $(this).attr('yorum_id');
    var val = $(this).val();
    var yazi = $(this).attr('yazi_id');
    $(this).val("");

    $.ajax({
      url: url,
      type: "post",
      data: {
        "alt_id": alt_id,
        "icerik": val,
        "yazi": yazi
      },
      success: function(cevap) {
        console.log(cevap);
        cevap1 = cevap.split('***');
        if (cevap1[0] == "succ") {
          if (cevap1[1] == "1") {
            if (cevap1[8] == "0") {
              $("#yorumlar").append("<div class='box-comment' yorum_id='" + cevap1[2] + "'>" +
                "<!-- User image -->" +
                "<a href='" + cevap1[3] + "'>" +
                "<img class='img-circle img-sm' src='" + cevap1[4] + "' alt='User Image'>" +
                "</a>" +
                "<div class='comment-text'>" +
                "<span class='username'>" +
                "<a href='" + cevap1[3] + "'>" + cevap1[5] + "</a>" +
                "<span class='text-muted pull-right'>" + cevap1[6] + "</span>" +
                "</span><!-- /.username -->" +
                cevap1[7] +
                "</div>" +
                "<!-- /.comment-text -->" +
                "</div>" +
                "<div class='alt_yorumlar' id='" + cevap1[2] + "'></div><div class='box-comment' style='margin-left:50px;'>" +
                "<img class='img-responsive img-circle img-sm' src='" + cevap1[4] + "' alt='Alt Text'>" +
                "<!-- .img-push is used to add margin to elements next to floating images -->" +
                "<div class='img-push'>" +
                "<input type='text' yorum_id='" + cevap1[2] + "'  yazi_id='" + cevap1[9] + "' class='form-control input-sm yorum_input' placeholder='Yorumunuzu yazın!'>" +
                "</div></div>");
            } else {
              $("div[class='alt_yorumlar'][id='" + cevap1[8] + "']").append("<div class='box-comment' style='margin-left:50px;' yorum_id='" + cevap1[2] + "'>" +
                "<!-- User image -->" +
                "<a href='" + cevap1[3] + "'>" +
                "<img class='img-circle img-sm' src='" + cevap1[4] + "' alt='User Image'>" +
                "</a>" +
                "<div class='comment-text'>" +
                "<span class='username'>" +
                "<a href='" + cevap1[3] + "'>" + cevap1[5] + "</a>" +
                "<span class='text-muted pull-right'>" + cevap1[6] + "</span>" +
                "</span><!-- /.username -->" +
                cevap1[7] +
                "</div>" +
                "<!-- /.comment-text -->" +
                "</div>");
            }
          }
        }
      }
    });
  }
});

当我发布新评论时，ajax 会转到我的 php 代码，如果评论可以成功添加到我的数据库，它会返回该评论所需的值。然后，我创建了一个包含输入的新 DOM 元素。但我无法选择新的输入。 请有人帮助我：D 我的网站的 cmets 需要它。

Answer 1

我建议你在成功回调后使用Jquery模板来渲染你的HTML，这样你就可以避免在你的javascript文件中编写大量的HTML代码，你也可以很容易地维护它。

点击此链接获取文档：

http://stephenwalther.com/archive/2010/11/30/an-introduction-to-jquery-templates