如何爲多個項目創建一個javascript/jquery函數處理程序？

Question

我有HTML象下面這樣：

<table class="table" id="subscriptions"> 
    <tbody id="subscriptions-tbody"> 
    <tr> 
     <td>Item 1</td> 
     <td><a href="#">delete</a></td> 
    </tr> 
    <tr> 
     <td>Item 2</td> 
     <td><a href="#">delete</a></td> 
    </tr> 
    <tr> 
     <td>Item 3</td> 
     <td><a href="#">delete</a></td> 
    </tr> 
    </tbody> 
</table> 

項目可以動態地添加有。

現在，我應該創建該函數，它將幫助我從列表中刪除元素，如果用戶單擊刪除。 看起來我應該：

1. 分配列表中的（我有這樣的id）每個項目的一些獨特的ID - 我應該在哪裏讓他們？部分爲href？
2. 一旦用戶點擊鏈接，我應該阻止默認操作並將控件傳遞給我的函數（它會將元素從列表中隱藏起來，並將POST請求發送到服務器），其中item id爲參數。

怎麼辦？

Answer 1

你應該保持在tr與data- attributes服務器端需要（像id）的信息，並使用.on()處理來自事件桌子..

HTML

<table class="table" id="subscriptions"> 
    <tbody id="subscriptions-tbody"> 
    <tr data-id="3"> 
     <td>Item 1</td> 
     <td><a href="#" class="delete">delete</a></td> 
    </tr> 
    <tr data-id="5"> 
     <td>Item 2</td> 
     <td><a href="#" class="delete">delete</a></td> 
    </tr> 
    <tr data-id="6"> 
     <td>Item 3</td> 
     <td><a href="#" class="delete">delete</a></td> 
    </tr> 
    </tbody> 
</table> 

腳本

$("#subscriptions").on("click", "a.delete", function(e) { 
    e.preventDefault(); 
    var row = $(this).closest('tr'), 
     relatedId = row.data('id'); 

    $.post(...); // use relatedId here 
    row.fadeOut(500, function(){ 
     row.remove(); 
    }) 
}); 

Answer 2

這是事件代表團的完美案例。勾上table或tbody的事件，但問jQuery來觸發它，只有當它發生的刪除鏈接，就像這樣：

$("#subscriptions-tbody").delegate("a", "click", function(event) { 
    var row = $(this).closest('tr'); 

    // ...delete the row 

    return false; // Don't try to follow the link 
}); 

Live Example | Source

由於事件鉤在table或tbody，添加和刪除行並不重要，因爲該事件是在table或tbody級別進行處理。

在上面，我使用delegate，因爲我喜歡多麼明確的是。使用jQuery 1.7或更高版本，可以使用的方法太overloaded- on function代替：

$("#subscriptions-tbody").on("click", "a", function(event) { 
    var row = $(this).closest('tr'); 

    // ...delete the row 

    return false; // Don't try to follow the link 
}); 

Live Example | Source

請注意，參數的順序稍有不同。

Answer 3

試試這個：

<table class="table" id="subscriptions"> 
    <tbody id="subscriptions-tbody"> 
    <tr data-id="1"> 
     <td>Item 1</td> 
     <td><a href="#" class="delete">delete</a></td> 
    </tr> 
    <tr data-id="2"> 
     <td>Item 2</td> 
     <td><a href="#" class="delete">delete</a></td> 
    </tr> 
    <tr data-id="3"> 
     <td>Item 3</td> 
     <td><a href="#" class="delete">delete</a></td> 
    </tr> 
    </tbody> 
</table> 

將被命名爲您刪除錨點類，比方說class="delete"，你就會把data-id屬性表中的行，以獨特的識別每件物品並瞭解id來發送到服務器。現在

您的JS可能是這樣的：

$("#subscriptions-tbody").on('click', 'a.delete', function(e){ 

    var tr = $(e.currentTarget).closest('tr'); 

    //get the id 
    var id = tr.attr("data-id"); 

    //make ajax request 
    $.ajax({ 
     url: 'script.php', 
     data: id, 
     success: function(data) { 

     //hide the item or remove 
     tr.remove(); // tr.hide(); 

     // ajax callback 
    } 
    }); 
}); 

Answer 4

您可以將ID存儲爲上的控制或行A data-屬性。將點擊處理程序委託給表itleslf以考慮在使用on()方法運行代碼時不存在的動態添加元素。

HTML：

<!-- class added to element --> 
<a href="#" class="delecte-btn" data-id="3">delete</a> 

JS

$('#subscriptions').on('click', '.delete-btn',function(evt){ 
    evt.preventDefault(); 
    var id=$(this).data('id'), $row=$(this).closest('tr'); 
    /* send data to server and remove row on success*/ 
    $.post('serverUrl.php', { rowID: id, action :'delete'}, function(){ 
     $row.remove(); 
    }) 
})