jquery - 无法让 jQuery( html, props ) 处理事件

Question

我无法让 click 事件对由此创建的元素起作用。

http://jsfiddle.net/iambriansreed/PEZXa/

jQuery

$('<a href="#">a</a>', {
  click: function(){
    alert('a clicked');
  }
}).appendTo("div");

$('<span>span</span>', {
  click: function(){
    alert('span clicked');
  }
}).appendTo("div");

请不要向我展示可以将onclick事件添加到元素的 50 种不同方法，我想知道为什么这种特定方法有效或无效。

来自文档： http ://api.jquery.com/jQuery/#jQuery2

Answer 1

$('<a />', {
    href: '#',
    text: 'a',
  'click': function(){
    alert('a clicked');
  }
}).appendTo("div");

$('<span />', {
    text: 'span',
  'click': function(){
    alert('span clicked');
  }
}).appendTo("div");

http://jsfiddle.net/PEZXa/56/

从文档

html - 定义单个独立 HTML 元素的字符串（例如 <div/> 或 <div></div>）。

Answer 2

当像这样创建的元素包含文本节点或属性时，jQuery 似乎不喜欢它。本质上，您提供的 HTML 代码应该是一个（可能是自闭合的）标签。

这可能是因为您使用的语法要求在对象参数中定义属性，而不是在 HTML 和对象之间混合。

无论如何，这段代码对我有用：

$('<a /> ', {
    href: '#',
    text: 'a',
    click: function() {
        alert('a clicked');
    }
}).appendTo("div");

$('<span />', {
    text: 'span',
    click: function() {
        alert('span clicked');
    }
}).appendTo("div");​

演示：http: //jsfiddle.net/PEZXa/60/

Answer 3

这应该有效：

$('<a/>', {
    href: "#",
    text: 'a',
    click: function(){
        alert('a clicked');
    }
}).appendTo("div");

小提琴

Answer 4

jQuery(html, props)只有当html它是一个没有其他属性或子元素的裸标签时才有效。