動態添加jQuery事件

我試圖動態地添加按鈕，並添加一個jQuery甚至聽他們。但是，我遇到了Javascript的範圍問題（至少我認爲就是這樣）。動態添加jQuery事件

這是一個很值得我的代碼

for (var item in group) { 
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>"); 
    $('#id' + item).click(function() { 
     alert("Hello from " + item); 
    }); 
}

現在的問題是，無論我點擊了哪個按鈕，事件回調內部的警報始終使用的最後一個項目。

現在我明白爲什麼會發生這種情況（好吧，粗略地說是P），但我該如何解決它？

謝謝

來源

2011-08-20 Gal

您可以使用jQuery的$。每個方法循環以同樣的方式組陣列，但這樣便解決了問題，爲您提供：

$.each(group,function(i,v){ 
     $('div').append("<input type='button' value='" + v + "' id = 'id" + v + "'>"); 
     console.log($('#id' + v)) 
     $('#id' + v).click(function() { 
      alert("Hello from " + v); 
     }); 
    });

http://jsfiddle.net/ebiewener/byV9X/

來源

2011-08-20 16:03:51 maxedison

我會着眼於使用jQuery委託函數。

http://api.jquery.com/delegate/

這將附加一個事件處理程序的容器。容器中的所有元素事件都會涓涓細流到容器，如果處理將觸發事件處理程序。實現這一目標的

來源

2011-08-20 15:58:58

一個正確的方法是，像這樣

for (var item in group) { 
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>"); 
    (function(item){ 
     $('#id' + item).click(function() { 
      alert("Hello from " + item); 
     }); 
    })(item); 
}

這裏是一個的jsfiddle證明http://jsfiddle.net/reefbarman/bbP64/

來源

2011-08-20 16:00:46 Tristan

好的回答... :) – gislikonrad

它爲我的作品：http://jsfiddle.net/bgt89/，但我沒有改變你的處理器使用的瓶蓋。

var group = ['asdf', 'rere', 'eeeee'] 

$(document).ready(function() { 
    for (var item in group) { 
     $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>"); 
     $('#id' + item).click((function(item) { 
      return function() { 
       alert("Hello from " + item); 
      } 
     })(item)); 
    } 
});

來源

2011-08-20 16:00:58 Joe

最簡單的方式：通過一些event data：

for (var item in group) { 
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>"); 
    $('#id' + item).click({item: item}, function(event) { 
     alert("Hello from " + event.item); 
    }); 
}

或者使用event.target或this：

for (var item in group) { 
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>"); 
    $('#id' + item).click(function(event) { 
     alert("Hello from " + event.target.id); //or this.id 
    }); 
}

來源

2011-08-20 16:01:24

我認爲一切都OK了在代碼中除了使用在item變量alert()聲明。

由於在for循環完成後警報運行很久，警報將會看到項目的最後一個值，而不是您想要的值。如果你只是想訪問物品ID當前點擊，那麼你可以得到從this參考而不是將它試着改變你的代碼，這一點：這裏

for (var item in group) { 
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>"); 
    $('#id' + item).click(function() { 
     alert("Hello from " + this.id.slice(2)); 
    }); 
}

作品在此的jsfiddle：http://jsfiddle.net/jfriend00/uyK3m/

來源

2011-08-20 16:01:45 jfriend00

使用this.item返回undefined對我來說... – Gal

@Gal - 在你的實際代碼中一定有其他錯誤，因爲它在jsFiddle中可以正常工作：http：// jsfiddle達網絡/ jfriend00/uyK3m /。 – jfriend00

以上所有答案都是正確的，但是unnecessarily verbose。「這個」是你的朋友。

for (item in group) { 
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>"); 
    $('#id' + item).click(function() { 
     alert("Hello from " + this.id.slice(2)); 
    }); 
}

來源

2011-08-20 16:08:38 Sinetheta

Harmen，

爲什麼你不jQuery的直播功能。它允許你使用jquery選擇器將一個函數綁定到一組對象上的一個事件，就像$（'＃button'）。click（）一樣，但是也允許將來追加的新元素也使用click事件。這將符合您的動態要求。

請看下面的例子。我使用live函數將click事件綁定到類「testButton」的所有元素。然後獲取該值使用$（this）上的attr（'value'），因爲這是單擊的元素。

var group = ["Test 1", "Test 2", "Test 3"]; 

    for (var item in group) { 
     $('div').append("<input class='testButton' type='button' value='" +item+ "'>"); 
    } 

    $('.testButton').live('click', function(e) { 
      alert('Hello Im From ' + $(this).attr('value')); 
     });

jQuery的直播功能：http://api.jquery.com/live/

工作實例：http://jsfiddle.net/bbP64/12/

希望有所幫助。

來源

2011-08-20 17:43:17

動態添加jQuery事件

回答

相關問題