如何使用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。