Pourquoi une balise d'ancrage générée avec JQuery ne déclenche-t-elle pas son événement onclick?

Question

Je génère dynamiquement une balise d'ancrage à l'aide de jQuery. J'ai ajouté un attribut onclick, mais lorsque je clique sur le lien, l'onclick ne se déclenche pas.

Je suis générer le lien comme suit:

$(document).ready(function() { 

    var attributes = { 
     "id": "xxx", 
     "onclick": "alert('xxxx');", 
     "href": "https://localhost/widget/TabTest.aspx#" 
    }; 
    var link = $.create("a", attributes); 
    $(link).append("xxxx"); 
    $("#WidgetContainer").append(link); 
}); 

Answer 1

Définissez l'attribut clic avec fonction click() du jQuery.

var attributes = { 
    "id": "xxx", 
    "href": "https://localhost/widget/TabTest.aspx#" 
}; 
var link = $.create("a", attributes); 
$(link).append("xxxx").click(function(){ alert("HELLO"); }); 
$("#WidgetContainer").append(link); 

Ce que vous avez fonctionnera probablement dans certains navigateurs, mais pas d'autres (j'avais eu que le travail dans FF mais ne parviennent pas dans IE). Généralement, si jQuery a une fonction pour faire quelque chose, utilisez-la.

---

EDIT: En réponse au commentaire d'Adam Backstrom sur la question je me suis dit que je ferais mieux d'offrir une alternative. Quand je l'ai fait dans le passé, je l'ai fait comme ceci:

$("#someplace").wrapInner("<a href='#'></a>"); 
$("#someplace a").click(function() { 
    alert("Hello"); 
}); 

---

EDIT 2: D'après les commentaires à ce post, comment faire cela en une ligne (pas toujours la meilleure idée):

$("<a id='xxx' href='https://localhost/widget/TabTest.aspx#'>xxxx</a>") 
     .click(function() { alert("Hello"); }) 
     .appendTo($("#WidgetContainer")); 

Answer 2

Si vous utilisez 1.3 jQuery ou au-dessus, vous pouvez utiliser l'événement « en direct » obligatoire pour attacher l'événement click à tous <A> balises que vous ajoutez à votre page. Exemple:

$('a').live('click', function (evt) { 
    alert('Hello'); 
    evt.preventDefault(); 
}); 
var link = $.create('a', { 
    'id' : 'xxx', 
    'href' : 'http://localhost/' 
}); 
$('#container').append(link);