指定单击以从数据库中动态创建数据 - Assign click to dynamically created data from database

Assign click to dynamically created data from database

我创建了javascript，在其中为丢弃的元素提取数据并创建数据。数据是使用json编码从数据库中提取的。我已经为元素分配了id，但每个元素的点击事件都不起作用。仅获得最后的元素CCD_ 1并且在该CCD_。

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

有人能说出如何在每个提取的元素上进行绑定点击的想法吗。

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

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

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版之后已被弃用