javascript - 为什么 jQuery 不向该元素添加数据属性？

Question

我的页面上有一个隐藏的模式框，通过调用这个 create.js 文件来呈现。

除了向元素添加 data-meal_id 属性外，其他一切都运行良好。

这是jQuery：

var $modal, $modal_close, $modal_container, $meal_id;
$modal = $('#modal');
$modal_close = $modal.find('.close');
$modal_container = $('#modal-container');
$meal_id = <%= @meal_id %>

$modal
  .data('meal_id', $meal_id)
  .prepend($modal_close)
  .css('top', $(window)
  .scrollTop() + 100)
  .show();

$modal_container.show();

$(document).on('click', '#modal .close', function() {
  $modal_container.hide();
  $modal.hide();
  return false;
});       

以下是触发上述代码之前的元素：

<div id="modal-container"></div>
<div id="modal">

触发后...

<div id="modal-container" style="display: block;"></div>
<div id="modal" style="top: 100px; display: block;"><a href="#" class="close">cancel</a>

完全跳过数据属性？？！

Answer 1

.data()如果要设置必须使用的元素的数据属性，该方法不会修改 domattr()

$modal
  .attr('data-meal_id', $meal_id)