Question

您可以看到3个按钮，每个按钮都有data-entry-id属性。

  <button data-toggle="modal" data-target="#edit" data-entry-id="5"> Button 1</button>
  <button data-toggle="modal" data-target="#edit" data-entry-id="10"> Button 2</button>
  <button data-toggle="modal" data-target="#edit" data-entry-id="15"> Button 3</button>

当您单击某个按钮时，它会在data-entry-id按钮（Save changes属性）中将值从data-id传递到BootStrap模式。这就是它的完成方式：

  $('#edit').on('show.bs.modal', function(event) {
      var thisModal = $(this);   
      var entryId = $(event.relatedTarget).data('entry-id');

      $('.btn-save', thisModal).attr('data-id', entryId);
      $('.content-text', thisModal).html("Button Entry ID: " +  entryId);
   });

如果您点击任何按钮，然后点击＆＃34;保存更改＆＃34;来自模态的按钮 - 它将从data-id属性提醒id。问题是，当您点击＆＃34;保存更改＆＃34;时，它没有显示正确的ID。它与＆＃34;保存更改＆＃34;中的data-id属性不匹配按钮。造成这种情况的原因是什么？

$('body').on("click", ".btn-save", function (event) {
    var id = $(this).data('id');
    alert(id);
});

Answer 1

不要将data-*与.data()和jQuery.attr一起使用，使用其中任何一个，两者都不同。

jQuery.data()不会操纵attribute，反之亦然

 $(function() {

   $('#edit').on('show.bs.modal', function(event) {
     var thisModal = $(this);
     var entryId = $(event.relatedTarget).data('entry-id');
     alert(entryId)
     $('.btn-save', thisModal).attr('data-id', entryId);
     $('.content-text', thisModal).html("Button Entry ID: " + entryId);
   });
 });

 $('body').on("click", ".btn-save", function(event) {
   var id = $(this).attr('data-id');
   alert(id);
 });

Updated Fiddle

Answer 2

虽然我没有从您的问题中清楚地了解您的代码，但我可以看到您正在使用：

$('body').on("click", ".btn-save", function (event) {
    var id = $(this).data('id');
    alert(id); 
});

我认为当这个事件处理程序触发$（this）时会引用body元素。我可以假设，由于您尝试将数据保存到保存按钮，您希望从保存按钮的数据中检索ID，如下所示：

var id = $(e.target).data('id');

Answer 3

$('body').on("click", ".btn-save", function (event) {
    var id = $(this).attr('data-entry-id');
    alert(id);
});

数据属性是属性。所以你抓住它们就像抓住其他属性一样。

Updated Fiddle

jQuery - 从click事件中获取不正确的ID

3 个答案: