JQuery .data функция против установки значения данных в HTML

Question

в JQuery, если я использую $("#my_button").data('my-value', { onClick: function() { my_obj_function(); } });

и в другой функции я сделать это

my-value.onClick.call() это работает.

, но если я попытаюсь установить данные, связанные с html, он не работает. я сделал это в HTML <a href='#' data-my-value='{"onClick":"function() { my_obj_function(); }"}'>Click me</a>

в то время как calling my-value.onClick.call() я получаю uncaught typeerror : object function() has no method call

, что я делаю не так?

Answer 1

Когда вы устанавливаете значение с .data(), оно не устанавливает атрибут html для элемента, jQuery сохраняет его в своей собственной структуре данных. Вот почему вы можете использовать .data() для хранения функций и других объектов. .data()может использовать для восстановить html5 data- атрибуты, но не установить их.

Когда у вас есть атрибут html, это просто строка, поэтому вам нужно будет eval() или проанализировать ее как-нибудь и перейти к new Function(). Это не путь.

Сказав это, я не вижу, как может работать my-value.onClick.call(), учитывая, что на самом деле он говорит my минус value.onClick.call(). Предполагая, что вы установили значение с .data() вы могли бы сказать $("#my_button").data('my-value').onClick.call() ...

Если вы хотите установить атрибут data- с JQuery вы можете использовать метод .attr() вместо .data(), с $("#my_button").attr('data-my-value', ...), но, как уже упоминалось это установит его как строка.

Answer 2

Ваш код

<a href='#' data-my-value='{"onClick":"function() { my_obj_function(); }"}'>Click me</a> 

устанавливает его в виде строки, а не как объект.