對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事件的困惑？

回答

相關問題