对 jQuery 事件感到困惑？

Question

I have just started to use jQuery and have run into a problem regarding events.

Below is my code, it creates a div element on the page, I would like to attach an event handler to this div that reacts if it is clicked or double clicked. I thought the following code would work but it doesn't seem to work at all:

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

When the event is fired is should simply alert what DIV element was clicked but I get the following error in firebug:

this.mainAppDiv is undefined
line 43 - alert("The Clicked Divs ID: " + this.mainAppDiv.id);

Can anyone see why this would not work?

Answer 1

You're guilty of this abuse.

-- this == window

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

-- this == dom object clicked

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

Simple answer is change to:

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

But bigger picture use selectors instead of this to find things. this is not portable and should be avoided unless you really want to refer to a specific context. And it can be redefined - if you have, say, a function in an object which uses this to refer to the object it's part of, and you bind that to a jQuery click event, this would refer to thing that was clicked, and not the object. Your code wouldn't work at all if you moved it to a function or object. eg do this instead.

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

Answer 2

this is not the same element within the handler. Inside the handler, this refers to the element that was clicked to which the handler was applied.

$('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

Because this inside that event handler will not refer to the same object as it did when the handler was defined and passed to jQuery. It'll be a reference to the target <div> you created (assuming that setup for the event handler actually works).

You can simplify that code a lot:

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

As they are created runtime , you have to use live instead of click

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

jquery live should help

As others mentioned you have two problems in your code , you still need to use jquery live...as you are creating the div dynamically