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

回答

相关问题