データベースから動的に作成されたデータにクリックを割り当てます

debugcn 投稿 Dev

ビニタバスワニ

ドロップされた要素のデータがフェッチされて作成される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;
//  });
});

フェッチされた各要素をクリックしてバインドする方法を誰かに教えてもらえますか？

ブーシャンカワドカー

これを入力してください：作成された要素にクラスを追加し、そのクラスを持つすべての要素のクリックイベントハンドラーを記述します。下記参照

作成しているループに以下の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);
    });
});

注：bindjQueryバージョン1.5以降は非推奨になっているため、使用しないでください

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]