JQuery 和访问博客文章的嵌套输入元素的值

Question

我正在开发自己的博客，类似于 Facebook 的某种克隆版。我需要能够删除一些帖子，而我计划做的就是在每个帖子中插入一个带有帖子 ID 的隐藏(尚未隐藏)输入。所以我为每篇文章都有一个大字符串，如下所示:

    $('#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 的内部输入类型，该类型将被隐藏。

我尝试了很多东西来让它发挥作用，但没有一个能达到我想要的效果。现在，我有这段使用事件委托(delegate)的代码，但不确定如何获取文本输入的值:

            //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>