Почему 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() не изменяет РОМ, если вы хотите установить атрибут данных элемента вам придется использовать attr()

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