HTML 5數據屬性不調用URL

我已經創建了一個按鈕動態地用下面的代碼：HTML 5數據屬性不調用URL

var del = $('<button/>') 
    .addClass('btn btn-danger') 
     .attr('data-type', 'DELETE') 
     .attr('data-url', file.deleteUrl) 
     .text('DELETE');

的file.deleteUrl是這樣的：http://somedomain/?file=1411934997-1528.jpeg，其將數據傳遞給被刪除的處理腳本。

這（上面）提供了一個data-url屬性的按鈕，當點擊按鈕時，我想DELETE調用被髮送到該URL。

然而，它目前不工作，我不知道爲什麼。

在我的控制檯中按鈕看起來不錯，但是當我點擊按鈕時調用沒有被觸發。

我是一個擁有數據屬性的noob，可以使用一些幫助。

謝謝

來源

2014-09-28 Mobaz

1st-'del'是一個保留字。第二 - 你如何刪除它？代碼在哪裏？「onclick」事件在哪裏？一切都在哪裏？「不工作」是什麼意思？應該發生什麼？ – 2014-09-28 20:22:48

您可以添加代碼將事件處理程序綁定到按鈕的位置嗎？ – max 2014-09-28 20:22:56

@IsmaelMiguel'delete'是保留字而不是'del'。 – undefined 2014-09-28 20:27:22

你要做的點擊按鈕的Ajax調用：

del.click(function() { 
    $.ajax({ 
     url: $(this).attr("data-url"), 
     type: $(this).attr("data-type") 
    }); 
});

您還可以設置此代碼的任何btn-danger按鈕：

$(document).on("click", ".btn-danger", function() { 
    $.ajax({ 
     url: $(this).attr("data-url"), 
     type: $(this).attr("data-type") 
    }).done(function() { 
     $(this).closest("tr").remove(); // to remove the complet row after delete success 
    }); 
});

的優點是任何動態即將成爲這項工作btn-danger按鈕（事件click冒泡到document）。

來源

2014-09-28 20:27:38

嗨尼古拉斯 - 這真是太神奇了 - 謝謝 - 現在就把它綁定起來 - 另外一件事 - 一旦我已經完成DELETE調用並返回一些東西，我該如何刪除那個特定的.btn危險？ – Mobaz 2014-09-28 20:42:45

你想刪除DELETE後的按鈕嗎？ – 2014-09-28 20:45:56

實際上按鈕是在一個錶行中，我想刪除整行（因爲圖像已被刪除，我不再想要縮略圖可用） – Mobaz 2014-09-28 20:47:29

僅僅添加數據屬性是不夠的。您需要附加一個.on（'click'）事件，該事件應該對腳本進行ajax調用。該腳本應該返回顯示其是否成功的數據。

一旦您從URL調用的腳本獲得成功/失敗結果，您應該決定如何處理該元素，無論您是要刪除它還是向用戶顯示一條錯誤消息。

其他信息：如果您將動態生成這些按鈕，則需要將click事件附加到您創建的每個新事件。

來源

2014-09-28 20:26:46

最後一行是不正確的，委託事件（'.on（）'）即使在動態添加的元素上也能工作。 – Shomz 2014-09-28 20:28:55

我已經讀過無數次了，但在實踐中，除非將事件附加到上述元素之外的容器，否則委託並不會真正起作用。就像$（'div'）。on（'click'，'button'，function（）{}）; ..對於有許多元素的更復雜系統來說，這可能是一種痛苦。 – 2014-09-28 20:35:06

100％爲真，希望將其添加到我的評論中。在最壞的情況下，將它連接到身體應該始終有效。 – Shomz 2014-09-28 21:05:28

HTML 5數據屬性不調用URL

回答

相關問題