15

我正在尝试在我的按钮上设置一些数据，以便可以访问它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'
});

想法？

4

3 回答 3

30

使用以下代码获取 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]();
});
于 2012-10-11T09:35:06.133 回答
7

不要将对象保存为 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;
}

小提琴

于 2012-10-11T08:59:05.760 回答
2

使用 jQuerydata如下所示：

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

利用：

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

为了从元素中获取数据

于 2012-10-11T09:03:33.623 回答