i creating html-elements in loop, , want attach event-handlers of elements. handlers need know id of element fired event, added elements id's parameter of binded function, anyway element click @ end, function received id of last element, not of element clicked.
here code (more simplified version in next code-block) (i'm using jquery, not jquery-problem, javascript-problem)
receiveobjects = function (jsonobj, statusstring, jqxhr) { var html, i, el; // error-handling not shown here html = '<table>'; (i = 0; < jsonobj.list.length; i++) { el = jsonobj.list[i]; html += '<tr>'; html += '<td class="td1" id="td1'+el.itemid+'">'; html += '<table>'; html += '<tr>'; html += '<td><img id="up9x'+el.itemid+'" src="pics/arrowup9.png" alt="" style="width:25px;height:66px;"></td>'; html += '<td><img id="up3x'+el.itemid+'" src="pics/arrowup3.png" alt="" style="width:25px;height:66px;"></td>'; html += '<td><img id="up1x'+el.itemid+'" src="pics/arrowup1.png" alt="" style="width:25px;height:66px;"></td>'; html += '</tr>'; html += '<tr>'; html += '<td><img id="down9x'+el.itemid+'" src="pics/arrowdown9.png" alt="" style="width:25px;height:66px;"></td>'; html += '<td><img id="down3x'+el.itemid+'" src="pics/arrowdown3.png" alt="" style="width:25px;height:66px;"></td>'; html += '<td><img id="down1x'+el.itemid+'" src="pics/arrowdown1.png" alt="" style="width:25px;height:66px;"></td>'; html += '</tr>'; html += '<tr>'; html += '<td colspan="3">'; html += '<div><button id="delete'+el.itemid+'" name="delete'+el.itemid+'" value="delete'+el.itemid+'">delete</button></div>'; html += '<div id="savediv'+el.itemid+'" style="display:none;">'; html += '<button id="save'+el.itemid+'" name="save'+el.itemid+'" value="save'+el.itemid+'">save</button>'; html += '</div>'; html += '</td>'; html += '</tr>'; html += '</table>'; html += '</td>'; html += '<td class="td2" id="td2'+el.itemid+'">'; html += '<table>'; html += '<tr>'; html += '<td>titel </td>'; html += '<td>'; html += '<input class="grau" type="text" id="intitel'+el.itemid+'" size="30" maxsize="50" value="'+el.titel+'">'; html += '</td>'; html += '</tr>'; html += '<tr>'; html += '<td>et</td>'; html += '<td>'; html += '<input class="grau" type="text" id="inet'+el.itemid+'" size="20" maxsize="30" value="'+el.et+'">'; html += '</td>'; html += '</tr>'; html += '<tr>'; html += '<td>text </td>'; html += '<td>'; html += '<textarea class="grau" id="intext'+el.itemid+'" rows="4" cols="30">'+el.text+'</textarea>'; html += '</td>'; html += '</tr>'; html += '</table>'; html += '<button id="loadpdf'+el.itemid+'" name="loadpdf'+el.itemid+'" value="loadpdf'+el.itemid+'">upload pdf</button>'; html += '</td>'; html += '<td class="td3" id="td3'+el.itemid+'">'; html += '<img src="'+el.pic+'">'; html += '<div>'; html += '<button id="newpic'+el.itemid+'" name="newpic'+el.itemid+'" value="newpic'+el.itemid+'">create pic pdf</button> '; html += '</div>'; html += '</td>'; html += '</tr>'; } html += '</table><div class="errormsg" id="changerederror"></div>'; $('#workblock').html(html); //after elements inserted dom, eventhandlers should binded: (i = 0; < jsonobj.list.length; i++) { el = jsonobj.list[i]; $('#up9x'+el.itemid).on('click',function(){evhd.clickmove(el.itemid,-9);}) $('#up3x'+el.itemid).on('click',function(){evhd.clickmove(el.itemid,-3);}) $('#up1x'+el.itemid).on('click',function(){evhd.clickmove(el.itemid,-1);}) $('#down9x'+el.itemid).on('click',function(){evhd.clickmove(el.itemid,9);}) $('#down3x'+el.itemid).on('click',function(){evhd.clickmove(el.itemid,3);}) $('#down1x'+el.itemid).on('click',function(){evhd.clickmove(el.itemid,1);}) $('#delete'+el.itemid).on('click',function(){evhd.clickdelete(el.itemid);}) $('#save'+el.itemid).on('click',function(){evhd.clicksave(el.itemid);}) $('#intitel'+el.itemid).on('change keyup paste mouseup',function(){evhd.changed(el.itemid);}) $('#inet'+el.itemid).on('change keyup paste mouseup',function(){evhd.changed(el.itemid);}) $('#intext'+el.itemid).on('change keyup paste mouseup',function(){evhd.changed(el.itemid);}) $('#loadpdf'+el.itemid).on('click',function(){evhd.clickloadpdf(el.itemid);}) $('#newpic'+el.itemid).on('click',function(){evhd.clicknewpic(el.itemid);}) } } the problem must located in way how attach id (el.itemid) event-handler function. simplified:
for (i = 0; < 500; i++) { el = jsonobj.list[i]; $('#prefix'+i).on('click',function(){ handler(i); //this seems problematic }) } i think know problem is, have no idea how solve it. can help, please?
this common mistake, due javascript's concept of closures (function plus pointers variables outside function have been referenced in function body). can solve iife (immediately invoked function expression):
for (i = 0; < 500; i++) { (function(num) { $('#prefix' + num).on('click',function() { handler(num); }) })(i); } this invoked function create new scope , have correct i saved in num. otherwise, javascript's closure (the function keeps pointer on i , references 500 after for loop ended) mess event handlers.
Comments
Post a Comment