Question

我刚开始使用JQuery并遇到了有关事件的问题。

下面是我的代码，它在页面上创建了一个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元素但是我在firebug中收到以下错误：

this.mainAppDiv未定义
第43行 - 提醒（＆＃34; Clicked Divs ID：＆＃34; + this.mainAppDiv.id）;

谁能明白为什么这不起作用？

Answer 1

您犯了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);
});

但是更大的图片使用选择器而不是this来查找内容。 this不可移植，除非您真的想要引用特定的上下文，否则应该避免使用this。它可以被重新定义 - 如果你有一个对象中的函数使用this来引用它所属的对象，并将它绑定到jQuery点击事件，$('#mainAppDiv').click(..)会引用被点击的东西，而不是对象。如果将代码移动到函数或对象，则代码将无法正常工作。例如这样做。

Answer 2

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');

Answer 3

因为该事件处理程序中的this不会引用与定义处理程序并传递给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);
  }
}));

Answer 4

在创建运行时，您必须使用live而不是单击

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

jquery live应该有帮助

正如其他人提到你的代码中有两个问题，你仍然需要使用jquery live ...你正在动态创建div

对Jquery事件的困惑？

4 个答案: