JQuery 并访问博客的嵌套输入元素值 post

Question

我正在创建自己的博客，类似于某种 Facebook 克隆。我需要能够删除一些 post，而我打算做的是在每个 post 中插入一个带有 post id 的隐藏（尚未隐藏）输入。所以每个 post 我都有一个大字符串，如下所示：

    $('#blog').append('<div class="blogPost"><div class="postTitre">' +title + '</div>' + 
                          '<div class="postDescription">' + description + '</div>' + 
                          '<div class="postTimeStamp">' + timestamp + '</div>' + 
                          '<embed class="embedPDF" src="./uploads/' + name + '#toolbar=0&navpanes=0&scrollbar=0"/>' + 
                          '<div class="closeDelete">
                              <input type="text" name="txtID" readonly="readonly" value="' + id + '" />X
                              <div class="close-text">DELETE</div>' +
                          '</div>
                       </div>');

我需要访问名为 txtID 的内部输入类型，它将被隐藏。

我尝试了很多东西来让它工作，但 none 正在做我想做的事。现在，我有这段使用事件委托的代码，但不确定如何获取我的文本输入的值：

            //THIS WILL FIRE THE DELETE POST EVENT
            $("#blog").on("click", "div.closeDelete", function(){
                var id = $("div.closeDelete").find("input[name=txtID]").val();
                alert("close delete this: " + id + " post");
            });

Answer 1

this 将是被点击的 div.closeDelete
找对应的id就可以了

var id = $(this).find('input[name="txtID"]').val();  // instead of $("div.closeDelete").find(...)

$("#blog").on("click", "div.closeDelete", function() {
  var id = $(this).find('input[name="txtID"]').val();
  console.log("close delete this: " + id + " post");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blog">
  <div class="blogPost">
    <div class="postTitre">title</div>
    <div class="closeDelete">
      <input type="text" name="txtID" readonly="readonly" value="123" />X
      <div class="close-text">DELETE</div>
    </div>
  </div>
  <div class="blogPost">
    <div class="postTitre">title</div>
    <div class="closeDelete">
      <input type="text" name="txtID" readonly="readonly" value="342" />X
      <div class="close-text">DELETE</div>
    </div>
  </div>
  <div class="blogPost">
    <div class="postTitre">title</div>
    <div class="closeDelete">
      <input type="text" name="txtID" readonly="readonly" value="486" />X
      <div class="close-text">DELETE</div>
    </div>
  </div>
</div>

JQuery 并访问博客的嵌套输入元素值 post

JQuery and accessing nested input element's value of a blog post

jquery

blogs