我正在使用jQuery创建一个包含图像的表。我的js代码看起来像这样:
$(document).ready(function() {
var korpusArray = new Array();
$.getJSON("file.js", function(data) {
var korpusId;
var korpusChooseTable = "<table id='TableKorpusGaleria'><tbody><tr>";
$.each(data, function(i, value) {
korpusArray.push(value.text);
strRemove = value.filename.replace("korpus/", "");
korpusChooseTable += '<td><p>'+value.title+'</p><p style="display:none;">'+value.id+'</p></br><img src="/korpus/thumbs/phoca_thumb_s_'+strRemove+'"></td>';
});
korpusChooseTable += '</tr></tbody></table>';
$("#korpusChoose").html(korpusChooseTable);
console.log(korpusArray.length);
console.log(data.length);
});
// after this I wanna click on table cell and do some function but
// it doesnt work. Can somebody tell me what I'm doing wrong?
$("#korpusChoose #TableKorpusGaleria tbody td").click(function() {
alert();
});
});发布于 2012-09-19 21:47:00
对动态创建的项目使用委托-如果绑定时元素不存在...,则不会附加任何事件处理程序。
jQuery 1.7及更高版本的http://api.jquery.com/on/
$("#korpusChoose ").on('click','#TableKorpusGaleria tbody td',function(){
alert();
});或jQuery 1.6到jQuery 1.4.3 http://api.jquery.com/delegate/
$("#korpusChoose ").delegate('#TableKorpusGaleria tbody td','click',function(){
alert();
});根据后继方法,
重写.live()方法非常简单;以下是所有三个事件附加方法的等效调用的模板:
$(选择器).live(事件,数据,处理器);// jQuery 1.3+
$(文档).delegate(选择器,事件,数据,处理器);// jQuery 1.4.3+
$(Document).on(事件,选择器,数据,处理器);// jQuery 1.7+
另一种方法是在将其添加到dom之后立即添加。
$("#korpusChoose").html(korpusChooseTable);然后紧接着
$("#korpusChoose #TableKorpusGaleria tbody td").click(function(){
alert();
});尽管后者效率较低,因为您需要将事件处理程序绑定到表中的每个td元素使用委托,您只需将其绑定到dom中存在的父元素,并将在事件冒泡时处理该事件。
发布于 2012-09-19 21:47:04
因为表是动态创建的,所以需要使用jquery的on来使用event delegation。这将允许您在元素存在之前附加一个处理程序。
$("#korpusChoose #TableKorpusGaleria tbody td").click(function(e){将会是
$("container").on("focus", "#korpusChoose #TableKorpusGaleria tbody td",function(e){其中container是某个静态祖先元素的选择器,该元素不是动态加载的。如果不存在这样的容器,则可以使用document,但在可能的情况下应避免这样做。
发布于 2012-09-19 21:48:23
因为该表是动态生成的,所以您可以使用:
$('#mytable').live('click', function() {
// Click event handler action here...
});使用live()方法绑定事件处理程序,它们也将在由AJAX调用或类似调用动态创建的元素上触发。
更新:由于.live()从JQuery 1.7开始就被弃用了,感谢安德鲁,请考虑使用.on()进行事件委派。
https://stackoverflow.com/questions/12496022
复制相似问题