Как использовать атрибут "data-" для вызова выбранной функции JavaScript

Я пытаюсь установить некоторые данные на своих кнопках так, чтобы к ним можно было получить доступ onclick. У меня нет проблем с использованием JSON в атрибуте данных кнопки, где ключевым значением является строка. Однако я не могу понять, как установить значения как функцию.

Что бы я хотел сделать, нажав кнопку в этом демо-коде, для события click вызывается функция option1(), которая будет предупреждать строку "привет вне".

Ошибка, которую я получаю, такова:

Uncaught TypeError: Property 'option1' of object #<Object> is not a function

HTML (JSFiddle здесь: http://jsfiddle.net/NDaEh/32/):

<button type='button' data-button='{"option1": "option1", "option2": 
"option2"}'>click1</button>

JS:

var data='hello outside';
var option1=function(data){
    alert(data)
}  

$('button').click(function(){
  //var data='hello inside';
  $(this).data('button').option1(data); // should alert 'hello outside'
});

Мысли?

Ответы

Ответ 1

Используйте следующий код, чтобы получить значения в вашем HTML:

$('button').click(function(){
  var data = $.parseJSON($(this).attr('data-button'));
  alert(data.option1)
});

Этот код специально для вашего требования. Таким образом, вы можете хранить данные в HTML и извлекать код JavaScript.

Обновлен код JSFiddle, рабочий код доступен по адресу: http://jsfiddle.net/NDaEh/51/

EDIT:

Решение для динамического вызова функции: http://jsfiddle.net/NDaEh/70/ HTML:

<button type='button' data-button='{"func": "func1"}'>click1</button>
<button type='button' data-button='{"func": "func2"}'>click2</button>

JS:

var myFuncs = {
  func1: function () { alert('Function 1'); },
  func2: function () { alert('Function 2'); },
};

$('button').click(function(){
  var data = $.parseJSON($(this).attr('data-button'));

  myFuncs[data.func]();
});

Ответ 2

Не сохранять объекты как строки JSON в значение свойства тега html. Вместо этого используйте метод data().

$('input[type="button"]').data({ option1: 'o1', option2: 'o2' });

Кроме того, когда вы пишете это:

$(this).data('button').option1(data);

option1 должен быть плагин для привязки к методу данных (или любой метод jquery, если на то пошло). Вам понадобится следующее:

jQuery.fn.option1 = function () {

   alert($(this).data('option1'));

   return this;
}

Fiddle

Ответ 3

Используйте jQuery data, как показано ниже:

$('input[type=button]').data('button-data', { option1: 'option1', option2: 'option2});

Использование:

$('input[type=button]').data('button-data');  //{ option1: 'option1', option2: 'option2}

Чтобы получить данные из элемента