Question

我正在尝试在我的按钮上设置一些数据，以便可以访问onclick。我在按钮的数据属性中使用JSON没有问题，其中键值是一个字符串。但是，我无法弄清楚如何将值设置为函数。

点击此演示代码中的按钮，我想要发生的是点击事件调用函数option1()，它将提醒字符串“hello outside”。

我得到的错误是：

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'
});

思考？

Answer 1

使用以下代码获取HTML中的值：

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

此代码专门针对您的要求。通过这种方式，您可以将数据存储在HTML中并使用JavaScript代码进行检索。

更新了JSFiddle代码，工作代码位于：http://jsfiddle.net/NDaEh/51/

编辑：

动态调用函数的解决方案：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]();
});

Answer 2

不要将对象保存为html标记属性值中的JSON字符串。改为使用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

Answer 3

使用jQuery data，如下所示：

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

使用：

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

为了从元素中获取数据

如何使用按钮的“data-”属性来调用选定的JavaScript函数

3 个答案:

Fiddle