Le meilleur moyen de créer un lien à l'aide de JQuery?

Comme Steven Xu correctement mentionné, l'insertion de chaînes HTML est plus rapide que la manipulation du DOM, c'est pourquoi je vous recommande de créer des éléments avec la manipulation de la chaîne au lieu de jQuery.

Vous avez seulement besoin de changer cela:

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
        "')\">This is blah<a>";

à ceci:

var s = "<a title=\"Blah\" href=\"javascript:BlahFunc('" + options.rowId +
        "')\">This is blah</a>";

(près <a> tag avec </a> à la fin de la chaîne).

La manipulation de la chaîne est beaucoup plus rapide que la Manipulation du DOM (voir cette par exemple). En outre, la différence sera beaucoup plus si vous essayez d'insérer un DOM fragment dans le milieu d'un grand code HTML. L'utilisation de DOM DocumentFragments peut un peu améliorer les performances, mais l'utilisation de la concaténation de chaîne est le moyen le plus rapide.

Toutes les autres réponses a écrit sa réponse sans la connaissance sur le contexte (jqGrid de mise en forme personnalisée) lorsque vous l'utilisez. J'essaie d'expliquer pourquoi il est important dans votre cas.

En raison des avantages de performance, jqGrid construit des fragments de code HTML pour la grille d'abord comme le tableau de chaînes de caractères, puis de construire une chaîne à partir du tableau de chaîne à l'égard de .join('') et d'insérer le résultat dans le corps de table à la fin de toutes seulement. (Je suppose que vous utilisez gridview:vrai jqGrid option qui est presque toujours recommandé). Le jqGrid de mise en forme personnalisée est une fonction de rappel utilisé par jqGrid lors de la construction de la grille (tableau) corps. La mise en forme personnalisée doit retourner le fragment de code HTML comme le chaîne comme résultat. La chaîne sera concaténé avec d'autres chaînes de construire le corps de la grille (tableau).

Donc, si vous allez changer votre code actuel de la pure manipulation de chaîne pour le jQuery de manipulation du DOM et de convertir les résultats de la chaîne, qui doit être retourné à la suite de la mise en forme personnalisée), puis votre code fonctionne lentement et vous n'aurez pas d'autres avantages*.

Le seul inconvénient de l'utilisation de la chaîne de manipulations est le problème de la vérification du code qui vous construire. Par exemple, l'utilisation de code sans les balises de fermeture </a> est un problème potentiel qui vous pouvez avoir. Dans la plupart des cas, le problème sera résolu lors de l'insertion des DOM fragment, mais parfois, vous pouvez recevoir les vrais problèmes. Donc, vous devriez tester le code que vous avez inséré très soigneusement.

Encore une remarque: Si vous voulez suivre JavaScript discret de style vous pouvez utiliser le bouton "#" comme valeur pour le href attribut et de lier le correspondant click événement à l'intérieur de gridComplete ou loadComplete gestionnaire d'événement. Si vous avez des problèmes avec la mise en œuvre de ce que vous pouvez ouvrir une nouvelle question et je vais essayer d'écrire le code correspondant exemple pour vous.

Remarque: je pense que la meilleure mise en œuvre de façon sera l'utilisation de onCellSelect ou beforeSelectRow au lieu de lier click événement à chaque <a> élément dans la colonne. Je vous recommande de lire les réponses ci-après pour plus de détails: cette une, un autre et un de plus vieux répondre.

jQuery('<a>').attr('href', 'url').text('blah')

Fera l'objet jquery et vous pouvez ensuite il suffit de l'ajouter au dom avec .append.

En général, l'insertion d'une chaîne HTML est plus rapide et plusieurs DOM injections et les manipulations DOM, qui est ce que cette jQuery de manipulation du DOM montants. Si vous vouliez insérer 500 de ces, la meilleure option, en terme de performance, serait de préparer la chaîne HTML et ensuite ajouter le code HTML.

Mais pour votre simple, vous option vous conviendra très bien. Pour les plus intelligents, vous pouvez utiliser du jQuery de manipulation du DOM de la bibliothèque sur votre nouveaux éléments. L'exemple ci-dessous doivent être auto-explicatif, mais si je n'ai pas été clair, en particulier, sont, laisser un commentaire, et je vais vous aider.

var toBeAdded = [
  { title: "one", row: 1, content: "ONE" },
  { title: "two", row: 2, content: "TWO" },
  { title: "three", row: 3, content: "THREE" }
];

var s = toBeAdded.length;
for(i=0;i<s;i++) {
  var a = $('<a>');
  a.attr('title', toBeAdded[i].title);
  a.attr('rel', toBeAdded[i].row);
  a.text(toBeAdded[i].content);
  a.addClass('blah_class');
  a.appendTo($('body'));
}

Et puis dans votre universel script:

$('a.blah_class').live('click', function(){
  var rel = $(this).attr('rel');
  BlahFunc(rel);
});