Comment utiliser l'attribut "data-" d'un bouton pour appeler une fonction JavaScript sélectionnée

Je suis en train de configurer des données sur mes boutons que l'on peut accéder onclick. Je vais avoir aucun problème en utilisant JSON dans un bouton de données de l'attribut où la valeur de la clé est une chaîne de caractères. Cependant, je ne peux pas comprendre comment définir les valeurs d'une fonction.

Ce que j'aimerais arriver à en cliquant sur le bouton dans cette démo de code pour l'événement click pour appeler la fonction option1() qui alerte la chaîne "bonjour à l'extérieur".

L'erreur que je reçois est: est-ce

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

HTML (JSFiddle est ici: 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'
});

Pensées?

source d'informationauteur tim peterson

Utiliser le code suivant pour obtenir les valeurs dans votre code HTML:

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

Ce code est spécifiquement pour vos besoins. De cette manière, vous pouvez stocker les données en HTML et de les récupérer dans le code JavaScript.

Mis à jour le JSFiddle code, code de travail est disponible à: http://jsfiddle.net/NDaEh/51/

EDIT:

Solution pour appeler une fonction dynamiquement: 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]();
});

6

Ne pas sauver les objets JSON chaînes de caractères dans le code html de la balise de la valeur de la propriété. Utiliser les données() la méthode la place.
```
$('input[type="button"]').data({ option1: 'o1', option2: 'o2' });
```
Aussi, lorsque vous êtes à la rédaction de ce:
```
$(this).data('button').option1(data);
```
option1 aurait besoin d'être un plugin afin d'être lié aux données (ou d'une méthode jquery pour cette question). Vous devez tomething comme ceci:
```
jQuery.fn.option1 = function () {

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

   return this;
}
```
Violon

Utiliser le jQuery data comme indiqué ci-dessous:

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

Utilisation:

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

Afin d'obtenir les données de l'élément

Vous devez vous connecter pour publier un commentaire.

Violon