javascript - 将点击分配给从数据库动态创建的数据

Question

我创建了 javascript，其中为删除的元素获取数据并创建数据。使用 json 编码从数据库中获取数据。我已为元素分配了 id，但每个元素的单击事件不起作用。仅获取最后一个元素 id，并在该 id 上执行单击操作。

JS:

$(document).ready(function () {
var i,j=0;
var x1,x2,y1,y2;
var sf=pf;
sf=Math.round(sf);
var tmp;
var y=null;
var idiv=[];
var fty=ft;
var fd=fid;
var fetch=data;
var x = null;
var count=fetch['count'];
var i=count+1;
//document.write(count);
var rai=[];
//rai[0]='hello';
//document.write(rai[0]);
var ww=[];
var hh=[];
var xx=[];
var yy=[];
var room=[];
var roomt=[];
for(j=0;j<=count;j++)
{

    rai[j]=fetch['room_id'+j];
    //document.write(rai[j]);
    ww[j]=fetch['width'+j];
    //document.write(ww[j]);
    hh[j]=fetch['height'+j];
    xx[j]=fetch['x'+j];
    yy[j]=fetch['y'+j];
    room[j]=fetch['room'+j];
    roomt[j]=fetch['roomt'+j];
    //document.write(room[j]);
   // alert("data"+rai+"  "+ww+" "+hh+" "+xx+" "+yy);
    idiv[j]=document.createElement('img')
    $('#droppable').append(idiv[j]);
    idiv[j].style.position="absolute";
    idiv[j].style.left=(xx[j]*sf)+'px';
    idiv[j].style.top=(yy[j]*sf)+'px'; 
    idiv[j].style.width=(ww[j]*sf)+'px';
    idiv[j].style.height=(hh[j]*sf)+'px';
    idiv[j].style.border=1+'px';
    idiv[j].id=room[j];
    //y=idiv[j].attr('idd',rai[j]);
        if(roomt[j]=='garden')
    {
        idiv[j].src="images/download.jpg";
    }
    else
    { 
        idiv[j].src="images/ac.png"
    }
    $(idiv[j]).draggable();
    //alert(y);
    //y=idiv[j].id;
//  alert(y);

//document.write("data"+rai[j]+"  "+(ww[j]*sf)+" "+(hh[j]*sf)+" "+(xx[j]*sf)+" "+(yy[j]*sf) + room[j]);
}
//$(this).bind("click",'idiv',function(){
//          alert("hello"+idiv.id);
//window.location.href="tables.php?room_id="+y;
//  });
});

谁能告诉我如何绑定(bind)每个获取的元素的点击。

Answer 1

Ty this:将类添加到创建的元素中，并为具有该类的所有元素编写一个单击事件处理程序。见下文

在要创建的循环中添加以下 html idiv[j] -

idiv[j].className = "clickable";

现在使用 .on() 编写一个点击事件处理程序

$(document).ready(function () {
    ...... your code start here
    ......
    //loop
    for(j=0;j<=count;j++)
   { 
    ...
    ...
   }
   //loop ends
   ... more code
   ....your code end here
    $(document).on("click",".clickable", function(){
         alert(this.id);
    });
});

注意:不要使用bind，因为它在 jQuery 版本 1.5 后已被弃用