对Jquery事件的困惑？

我刚刚开始使用JQuery，并遇到有关事件的问题。对Jquery事件的困惑？

下面是我的代码，它creaetes页面上的div元素，我想将事件处理程序附加到这个div如果单击或双击点击的反应。我想下面的代码会工作，但它似乎没有在所有的工作：

this.mainAppDiv = document.createElement("div"); 
this.mainAppDiv.id = "mainBody"; 
this.mainAppDiv.style.width = "99%"; 
this.mainAppDiv.style.height = this.mainCanvasDiv_H; 
this.mainAppDiv.style.border = "thin red dashed"; 

document.body.appendChild(this.mainAppDiv); 

$(this.mainAppDiv).click(function() 
{ 
    alert("The Clicked Divs ID: " + this.mainAppDiv.id); 
});

当事件被触发是应该简单地警告被点击了什么DIV元素，但我得到的萤火以下错误：

this.mainAppDiv is undefined
line 43 - alert（“The Clicked Divs ID：”+ this.mainAppDiv.id）;

任何人都可以看到为什么这不起作用？

来源

2011-04-03 Mike Smith

this不在处理程序中相同的元件。在处理程序中，this指向被应用了处理程序的单击元素。

$('div').attr('id','mainBody') 
     .css({ width: '99%', 
       height: $('#mainCanvasDiv').height(), 
       border-style: 'dashed', 
       border-width: 'thin', 
       border-color: 'red' 
     }) 
     .click(function() { 
      alert('The clicked Divs ID: ' + this.id); 
     }) 
     .appendTo('body');

来源

2011-04-03 18:13:30 tvanfosson

吹毛求疵：'this'指事件处理程序被绑定到被点击....不一定元件（事件鼓泡）的元素。 – 2011-04-03 18:27:27

@Felix - 采取了一点，但从技术上讲，如果您单击另一个元素中包含的元素，那么您还要单击外部元素。我会澄清。 – tvanfosson 2011-04-03 18:30:40

，因为它们是在运行时创建，你必须使用的活，而不是点击

http://api.jquery.com/live/

jQuery的现场应该帮助

正如其他人提到你在你的代码的两个问题，你仍然需要使用jquery直播......因为您正在动态创建div

来源

2011-04-03 18:13:38 kobe

他将事件处理程序直接附加到DOM元素，该元素可能工作;我将不得不捣鼓它。 – Pointy 2011-04-03 18:16:46

因为this在t帽子事件处理程序不会引用与处理程序定义并传递给jQuery时所用的对象相同的对象。这将是对您创建的目标<div>的引用（假设事件处理程序的设置实际上有效）。

您可以简化代码很多：

var self = this; 
${'body').append($('<div></div>', { 
    id: 'mainBody', 
    css: {width: '99%', height: self.mainCanvasDiv_H, borderColor: 'red', borderWidth: 'thin', borderStyle: 'dashed' }, 
    click: function() { 
    alert("Clicked ID: " + this.id); 
    } 
}));

来源

2011-04-03 18:13:58 Pointy

你有罪this虐待。

- 这==窗口

$(this.mainAppDiv).click(function() {

- 这== DOM对象点击

alert("The Clicked Divs ID: " + this.mainAppDiv.id);

简单的答案是改变：

$(this.mainAppDiv).click(function(e) 
{ 
    alert("The Clicked Divs ID: " + e.target.id); 
});

但是bigg呃图片使用选择器代替this找东西。 this不可移植，应该避免，除非你真的想参考一个特定的上下文。它可以被重新定义 - 如果你有一个对象中的函数，它使用this来引用它所属的对象，并且你将它绑定到一个jQuery点击事件，那么this会引用被点击的东西，而不是物体。如果将代码移至函数或对象，您的代码根本无法工作。例如代之以做。

$('#mainAppDiv').click(..)

来源

2011-04-03 18:17:25

对Jquery事件的困惑？

回答

相关问题