Ответ 1
Вам не нужно префикс имени данных словом data.
$( ".als-item > a" ).click(function(e) {
e.preventDefault();
var data = $('.als-item').data('loc-subject');
var attrmethod = $('.als-item').attr('data-loc-subject');
console.log(data);
console.log(attrmethod);
});
http://jsfiddle.net/thinkingmedia/c6kYT/
Разница между двумя
Вы можете жестко записать данные в DOM с использованием атрибутов данных. Например:
<a href="#" data-john="smith">Something</a>
console.log($("a").data("john"));
// will output "smith"
Это работает, потому что jQuery обрабатывает данные иначе, чем атрибуты. Он будет первым проверить, содержит ли элемент DOM атрибут с именем data-john, и если он возвращает это значение. Если он не содержит этого атрибута, он будет рассматривать внутренние данные прикрепленные к элементу DOM. Если эти данные существуют, он вернет это значение.
Когда вы устанавливаете данные с помощью jQuery, он не обновляет атрибуты элемента DOM. Он будет прикреплять данные к элементу DOM внутри. Поэтому $("a").data("house","on fire"); будет хранить строку "в огне" в элементе DOM под меткой "дом". Если вы используете инспектор DOM для просмотра HTML. Новый элемент, назначенный этому элементу data-house, не будет назначен.
Это отличается от методов jQuery.attr(). Которые непосредственно изменяют атрибуты элемента DOM.
EDIT:
Следует отметить, что для доступа к атрибутам данных некоторого элемента HTML вы должны выбрать элемент через какой-то селектор (id, class и т.д.). Вы не можете передать "this" любому атрибуту метода в элементе и использовать этот аргумент для доступа к данным. Он будет создавать undefined.
HTML
<li class="als-item">
<button onclick="somefunc1(this)" id="mybutton"
data-loc-subject="test value">My Button</button>
</li>
JS
function somefunc1(button) {
// this alert prints "undefined"
alert($(this).data('loc-subject'));
// this will print "test value"
alert($('#mybutton').data('loc-subject'));
}