为什么jQuery没有将data属性添加到这个元素?

时间:2013-04-19 18:24:55

标签: javascript jquery

我的页面上有一个隐藏的模态框,通过调用此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>

完全跳过数据属性??!

1 个答案:

答案 0 :(得分:8)

如果您要设置必须使用的元素的数据属性,.data()方法不会修改dom attr()

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