如何使用onclick链接调用jQuery函数？

Question

我希望用户能够从列表中删除项目而无需重新加载页面，并且正在使用jQuery/AJAX来执行此操作。然而，用我目前的代码divs不会被删除。我想我正确的遍历，所以不知道问题是什么。

在这里看到的例子：http://jsfiddle.net/BbpWc/1/

HTML：

<img src="delete.png" onclick="delete_item(<? echo $row_item['id'] ?>);"> 

的Javascript：

$(document).ready(function() { 
    delete_item=function(item_id){ 
     var confirmation = confirm('Are you sure you want to remove this item?'); 
     if (confirmation){ 
      $.post(
       "../../items.php?id="+item_id+"&i=delete" 
      ) 
      $(this).parent('.item_container').remove(); 
     }    
     else { 
      return false;  
     } 

    }; 
}) 

Answer 1

看一看这个小提琴：http://jsfiddle.net/BbpWc/9/

我：

• 改变了锚跨
• 删除ID在目前情况下，你不需要有一个ID在它。
• 删除onclick属性，并改为jQuery的点击

Answer 2

你失踪您的呼叫括号parent()，并没有通过在DOM节点（jQuery选择器开头的$(this)），因此给定更新的jQuery：

$(document).ready(function() { 
    delete_item = function(item_id,that) { 
     var confirmation = confirm('Are you sure you want to remove this item?'); 
     if (confirmation) { 
      //$.post("../../items.php?id=" + item_id + "&i=delete") 
      $(that).parent().prev().remove(); 
     } 
     else { 
      return false; 
     } 

    }; 
}); 

和HTML：

<div class="item_container"> 
    Item 1 
</div> 
<div> 
    <a href="#" onclick="delete_item(1,this);">Delete 1</a> 
</div> 

<div class="item_container"> 
    Item 2 
</div> 
<div> 
    <a href="#" onclick="delete_item(2,this);">Delete 2</a> 
</div> 

<div class="item_container"> 
    Item 3 
</div> 
<div> 
    <a href="#" onclick="delete_item(3,this);">Delete 3</a> 
</div> 

现在似乎工作：JS Fiddle demo。

---

编辑使用jQuery的click()事件，而不是侵入在线事件处理程序：

$('a').click(
    function(){ 
     var i = $(this).index('a') + 1; 
     delete_item(i,$(this)); 
    }); 

JS Fiddle demo。

---

编辑需要注意的是，有时候，事情可能比预期的更容易一些：

$('a').click(
    function(){ 
     $(this).parent().prev('div.item_container').remove().end().remove(); 
    }); 

JS Fiddle demo。

虽然，不可否认，这是不容易重复使用生活在一个库文件中某处的功能...

---

响应@罗克森的评论（下同）编辑关于使用的andSelf()方法：

$('a').click(
    function(){ 
     $(this).parent().prev('div.item_container').andSelf().remove(); 
    }); 

JS Fiddle demo。