Lier la fonction à la fonction onClick dans un autre champ d'application

Question

J'essaie de lier une fonction à l'attribut "onclick" de l'ancre. Je n'utilise pas le traditionnel bind/live/on/whatever de jQuery parce que j'ai d'autres scripts qui arrêtent la propagation des événements (ça craint, je sais).

Pour lier la fonction à l'attribut "onclick", je passe un objet JSON à un module comme ceci :

function foo() {
  alert('foo')
}

$('document').ready(function() {
    var options = {
        opt1: 'fooID',
        opt2: 'barID',
        json: mightyJSON,
        actions: [
            { url: 'contact/_id_/edit', text: "Edit", iconPath: 'edit.png' },
            { url: '#', onClick: foo, text: "Delete", iconPath: 'delete.png' }
        ]
    };

    var trolol = myModule.configure(options);
});

Comme vous pouvez le voir, la fonction nommée "foo" est transmise via la propriété "onClick" du JSON. La fonction est définie au-dessus de l'objet.

Dans "myModule", je crée la balise d'ancrage comme suit :

var buildLinks = function(objectID)
{
  var linksNbr = actions.length;
  var link, cssClass;

  for (var i = 0; i < linksNbr; i++)
  {
    // Adding the object ID to the URL
    link     = actions[i].url.replace('_id_', objectID);
    cssClass = actions[i].cssClass || '';

    var $link = $(document.createElement('a')).attr('onClick', actions[i].onClick)
                                              .attr('href', link)
                                              .attr('title', actions[i].text)
                                              .addClass(cssClass)
                                              .text('foo');
  }

  return $link.html();
};

Le problème est que, comme vous pouvez vous y attendre, "foo" est exécuté lorsque le script est analysé et uniquement à ce moment-là. Le "onclick" ne fonctionne même pas après.

Je peux le passer comme suit onClick: 'foo()' . L'onclick fonctionne mais il est aussi exécuté lors de l'analyse et c'est, à mon avis, très laid.

J'aimerais pouvoir le faire passer comme suit onClick: foo mais fonctionne correctement (c'est-à-dire qu'il n'est pas exécuté au chargement mais seulement au clic).

Il doit malheureusement fonctionner avec jQuery 1.4.4.

Answer 1

Voici un snippet fiddle . Si cette approche vous convient, vous pouvez comme ci-dessous définir onclick sur l'élément raw de jquery, comme ceci :

$link[0].onclick = options.actions[i].onClick;

Answer 2

1. dans la mesure du possible, renvoyer l'élément, et non son .html()

2. Ceci fait, n'utilisez pas .attr('onclick', ...) lorsque vous avez déjà une référence de fonction, utilisez .prop ou même simplement element.onclick = ...

par exemple

$link = $('<a>', {
    href: link,
    title: actions[i].text,
    'class': cssClass,
    text: 'foo'
}).prop('onclick', actions[i].onClick);

Answer 3

Je procéderais de la manière suivante :

var $link = $('<a></a>',{
    href : link,
    title : actions[i].text,
    'class' : cssClass,
    text : 'foo',
    click : actions[i].onclick
})
return $link;

Utilisez ensuite l'une des options suivantes ( 1 , 2 ) pour insérer le nœud, qui est le html avec les événements.

---

Pour ce qui est de la propagation, je ferais quelque chose comme ceci :

html <a href="#no" ....>text</a>

js $('a[href="#no"]').live('click',function(){ return false; });

Ainsi, chaque fois que la référence pointe vers #no l'événement est finalement propagé