jquery - 点击时需要隐藏div

Question

我正在尝试在网页中实现存档功能，该功能将向网页提交内容，然后在提交后隐藏 div。基本上，我在一个 div 和一个标签上创建一个动态 ID。这是我的代码：

<div class="section" id="milestone_<?php echo $milestone['id']; ?>">
  Stuff goes here
    <a href="javascript:void(archiveMilestone(<?php echo $milestone['id']; ?>))" id="archive_milestone_<?php echo $milestone['id']; ?>">(Archive)</a>
</div>

<script>
function archiveMilestone(id)
{
  var dataString = 'remove_milestone='+ id;
    $.post("<?php echo $_SERVER['REQUEST_URI']; ?>",dataString);
    $(document).ready(function(){
      $('a#archive_milestone_' + id).click(function(){
      $('#milestone_' + id).hide('slow');
      })
    });
}
</script>

看起来应该很简单，并且代码已成功发布，但该行不会消失。任何帮助将不胜感激，谢谢！

Answer 1

HTML

<div class="section" id="milestone_<?php echo $milestone['id']; ?>">
  Stuff goes here
   <a href="#" class="btnArchive">Archive</a>
</div>

脚本

$(function(){

 $(".btnArchive").click(function(){
   var item=$(this);
   var itemId=item.parent().attr("id").split('_')[1] 
   $.post("yourserverpage.php",{ remove_milestone : itemId } ,function(){
     item.parent().fadeOut("slow"); 
   });       
 });    
});

这是 jsFiddle http://jsfiddle.net/hQkVZ/10/

Answer 2

首先，您不应该$(document).ready(...在函数内部。这应该存在于 Javascript 的最外层。其次，您使用的是 PHP，因此您想要选择的项目在 PHP 解析它们之前不存在。请尝试以下方法将事件处理程序主动绑定到元素：

$("#archive_milestone" + id).on("click", function() {
    $("#milestone_" + id).hide("slow");
});

Answer 3

您也可以尝试archiveMilestone(<?php echo json_encode($milestone['id']); ?>)添加 json_encode() 因为它可能需要转义。