jquery无法工作机智dom元素刚刚通过ajax添加

时间:2017-08-25 18:18:53

标签: javascript jquery ajax dom

我遇到了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我的网站评论需要它。

1 个答案:

答案 0 :(得分:0)

我建议您使用Jquery模板在成功回调后呈现HTML,这样您就可以避免在javascript文件中编写大量HTML代码,并且还可以非常轻松地维护它。

请点击此链接获取文档:

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