web-dev-qa-db-fra.com

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

J'essaie de définir certaines données sur mes boutons de manière à ce qu'elles soient accessibles onclick. Je n'ai aucun problème à utiliser JSON dans l'attribut de données d'un bouton où la valeur de clé est une chaîne. Cependant, je ne peux pas comprendre comment définir les valeurs pour être une fonction.

Ce que j'aimerais arriver en cliquant sur le bouton dans ce code de démonstration, c'est que l'événement click appelle la fonction option1() qui alertera la chaîne "bonjour dehors".

L'erreur que je reçois est la suivante:

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?

javascriptjqueryhtmljsoncustom-data-attribute
12
tim peterson

Utilisez 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 votre besoin. De cette façon, vous pouvez stocker des données en HTML et les récupérer en code JavaScript.

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

ÉDITER:

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]();
});
28
IvenMS

Ne sauvegardez pas les objets en tant que chaînes JSON dans la valeur de la propriété de la balise html. Utilisez plutôt la méthode data ().

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

De plus, lorsque vous écrivez ceci:

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

option1 devrait être un plugin pour être enchaîné à la méthode de données (ou à toute méthode jquery d'ailleurs). Vous auriez besoin de quelque chose comme ceci:

jQuery.fn.option1 = function () {

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

   return this;
}

Violon

7
Johan

Utilisez 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

2
udidu