为数据库中的动态创建数据分配单击

Question

I have created javascript in which data is fetched for dropped element and are created. The data is fetched from database using json encoding. I have assigned id to the elements but the click event for every element is not working. only the last elements id is obtained and clicked is performed on that 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;
//  });
});

can anyone give idea how to bind click on each fetched element.

Answer 1

Ty this : add class to the element created and write a click event handler for all element having that class. See below

Add below html in Loop where you are creating idiv[j] -

idiv[j].className = "clickable";

Now write a click event handler using .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);
    });
});

NOTE: Don't use bind because it is deprecated now after jQuery version 1.5