如何將相同的jquery函數應用於多個按鈕

我想從我的數據庫使用Ajax獲取數據。我想要做的是在每個數據行之後添加一個刪除按鈕，這樣如果我想刪除某一行，我只需點擊它前面的刪除按鈕即可。我怎麼做？我目前試圖使用jquery和javascript ..如何將相同的jquery函數應用於多個按鈕

<table> 
<tr><td> A </td> <td> <input type = 'button' onclick = 'delete(A)' value = 'Delete'></td></tr> 
<tr><td> B </td> <td> <input type = 'button' onclick = 'delete(B)' value = 'Delete'></td></tr> 
</table> 

<script type="text/javascript"> 
$(document).ready(function() { 
function delete(d) { 
    var deletedata = 'delete=' + d; 
    $.post('searchadd.php', deletedata, function(data) { 
      **AJAX CODE** 

    }); 
    return false; 
}; 

}); 
</script>

我該怎麼做？這是可以直接與只有JQuery的？

來源

2012-09-27 calvin12

不知道我理解你的問題。你抱怨你的代碼不起作用嗎？ – JSantos

[刪除是保留字]（https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Reserved_Words） – jbabey

No ..我不知道如何使用一個單一的代碼來應用到所有的行在表中，以便當我單擊某個特定的刪除按鈕時，將調用該函數以轉到數據庫並從數據庫本身中刪除該行。我知道如何運行AJAX來刪除它，但我很困惑如何調用刪除按鈕的刪除功能，我點擊 – calvin12

修改後的代碼：jsfiddle

<table> 
    <tr><td> A </td> <td> <input type = 'button' value = 'Delete'></td></tr> 
    <tr><td> B </td> <td> <input type = 'button' value = 'Delete'></td></tr> 
    </table> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
    function deleteFromDB(d) { 
     var deletedata = 'delete=' + d; 
     $.post('searchadd.php', deletedata, function(data) { 
       **AJAX CODE** 

     }); 
     return false; 
    }; 
    $("input[value='Delete']").live('click',function(){ 
     var data = $(this).parents("tr:first").find("td:first").text();// A B 
     deleteFromDB(data); 
    }); 
    }); 
    </script>

注意：不要使用delete作爲函數的名稱，因爲它是在JavaScript中的關鍵字

來源

2012-09-27 13:44:38 Anoop

我想每次運行刪除功能時，我點擊刪除按鈕。所以我想從我的數據庫本身刪除行，而不僅僅是從html中刪除。 – calvin12

我做了更改。讓我知道你是否想要其他改變。 – Anoop

嘗試用類名

<table> 
    <tr><td> A </td> <td> <input type = 'button' class= 'btn' value = 'Delete'></td></tr> 
    <tr><td> B </td> <td> <input type = 'button' class= 'btn' value = 'Delete'></td></tr> 
    </table> 

$(document).ready(function() { 
    function delete(d) { 
     var deletedata = 'delete=' + d; 
     $.post('searchadd.php', deletedata, function(data) { 
       **AJAX CODE** 

     }); 
     return false; 
    }; 
    $(".btn").live('click',function(){ 
     $(this).parents("tr:first").remove(); 
    }); 
    });

來源

2012-09-27 13:46:50 muthu

嘗試這fiddle。這應該解決您的問題

來源

2012-09-27 13:53:44 SNAG

HTML

<table> 
<tr><td> A </td> <td> <input class="del-button" type = 'button' onclick = 'delete(A)' value = 'Delete'></td></tr> 
<tr><td> B </td> <td> <input class="del-button" type = 'button' onclick = 'delete(B)' value = 'Delete'></td></tr> 
</table>

的JavaScript

$(".del-button").on("click", function(e){ 
    // code for deletion 
});

來源

2012-09-27 13:56:26 Diode

我寧願這樣：

<table> 
<tr><td class="data-desc"> A </td> <td class="data-delete"> <input data-id="A" type='button' value='Delete'></td></tr> 
    <tr><td class="data-desc"> B </td> <td class="data-delete"> <input type='button' data-id="B" value = 'Delete'></td></tr> 
</table> 

<script type="text/javascript"> 
$(document).ready(function() { 
function delete(d, onDelete) { 
    var deletedata = 'delete=' + d; 
    $.post('searchadd.php', deletedata, function(data) { 
      **AJAX CODE** 
      onDelete.call(); 

    }); 
    return false; 
}; 
$("input[value='Delete']").live('click',function(){ 
    var that = $(this).parents("tr:first"); 
    delete($(this).data("id"), function() { 
     // after is deleted on db... 
     that.remove(); 
    }); 
}); 
}); 
</script>

來源

2012-09-27 13:56:40 jodarove

首選的方法是使用數據屬性來存儲ID。作爲jQuery 1.7 .on（）優於.live（）和.delegate（）

<table> 
     <tr><td> A </td> <td> <input data-id='1' type = 'button' value = 'Delete'></td></tr> 
     <tr><td> B </td> <td> <input data-id='2' type = 'button' value = 'Delete'></td></tr> 
    </table> 
    <script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $(':button').on('click', function() 
      { 
       var id = $(this).data('id'); 
       deleteRow(id); 
      }); 

      function deleteRow(d) 
      { 
       var deleteData = 'delete=' + d; 
       $.post('searchadd.php', deleteData, function (data) 
       { 
        ** AJAX CODE ** 
       }); 
       return false; 
      } 
     }); 
    </script>

來源

2012-09-27 14:38:04

如何將相同的jquery函數應用於多個按鈕

回答

相關問題