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

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

除了向元素添加一个data-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;
});       

var$modal、$modal\u close、$modal\u container、$mean\u id；
$modal=$（“#modal”）；
$modal_close=$modal.find（'.close'）；
$modal_container=$（'modal container'）；
$MEINE\U id=
$modal
.data（'MEAN_id'，$MEAN_id）
.prepend（$modal_close）
.css（'top'，$（窗口）
.scrollTop（）+100）
.show（）；
$modal_container.show（）；
$（文档）.on（'单击'，'模态.close'，函数（）{
$modal_container.hide（）；
$modal.hide（）；
返回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>

完全跳过数据属性

如果要设置元素的数据属性，必须使用

attr（）

---

jQuery有自己使用的内部

数据

对象，它不使用

数据集

DOM API，也不修改标记。

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