asp.net - Losing jQuery functionality after postback -
i have seen ton of people reporting issue online, no actual solutions. i'm not using ajax or updatepanels, dropdown posts on selected index change. html is
<div id="mylist"> <table id="ctl00_placeholdermain_dlfields" cellspacing="0" border="0" style="border-collapse:collapse;"> <tr> <td> <tr> <td class="ms-formlabel" style="width: 175px; padding-left: 10px"> <span id="ctl00_placeholdermain_dlfields_ctl00_lbldestinationfield">body</span> </td> <td class="ms-formbody" style="width: 485px"> <input name="ctl00$placeholdermain$dlfields$ctl00$txtsource" type="text" id="ctl00_placeholdermain_dlfields_ctl00_txtsource" class="ms-input" style="width:230px" /> <select name="ctl00$placeholdermain$dlfields$ctl00$ddlsourcefields" id="ctl00_placeholdermain_dlfields_ctl00_ddlsourcefields" class="ms-input"> <option value="some field name 1">some field name 1</option> <option value="some field name 2">some field name 2</option> <option value="some field name 3">some field name 3</option> <option value="some field name 4">some field name 4</option> </select> <a href="#" id="appendselect">append</a> </td> </tr> </td> </tr><tr> <td> <tr> <td class="ms-formlabel" style="width: 175px; padding-left: 10px"> <span id="ctl00_placeholdermain_dlfields_ctl01_lbldestinationfield">expires</span> </td> <td class="ms-formbody" style="width: 485px"> <input name="ctl00$placeholdermain$dlfields$ctl01$txtsource" type="text" id="ctl00_placeholdermain_dlfields_ctl01_txtsource" class="ms-input" style="width:230px" /> <select name="ctl00$placeholdermain$dlfields$ctl01$ddlsourcefields" id="ctl00_placeholdermain_dlfields_ctl01_ddlsourcefields" class="ms-input"> <option value="some field name 1">some field name 1</option> <option value="some field name 2">some field name 2</option> <option value="some field name 3">some field name 3</option> <option value="some field name 4">some field name 4</option> </select> <a href="#" id="appendselect">append</a> </td> </tr> </td> </tr><tr> <td> <tr> <td class="ms-formlabel" style="width: 175px; padding-left: 10px"> <span id="ctl00_placeholdermain_dlfields_ctl02_lbldestinationfield">title</span> </td> <td class="ms-formbody" style="width: 485px"> <input name="ctl00$placeholdermain$dlfields$ctl02$txtsource" type="text" id="ctl00_placeholdermain_dlfields_ctl02_txtsource" class="ms-input" style="width:230px" /> <select name="ctl00$placeholdermain$dlfields$ctl02$ddlsourcefields" id="ctl00_placeholdermain_dlfields_ctl02_ddlsourcefields" class="ms-input"> <option value="some field name 1">some field name 1</option> <option value="some field name 2">some field name 2</option> <option value="some field name 3">some field name 3</option> <option value="some field name 4">some field name 4</option> </select> <a href="#" id="appendselect">append</a> </td> </tr> </td> </tr> </table></div> the above div tag static, , table generated datalist object. on postback datalist reloads using new dataset, example
<div id="mylist"> <table id="ctl00_placeholdermain_dlfields" cellspacing="0" border="0" style="border-collapse:collapse;"> <tr> <td> <tr> <td class="ms-formlabel" style="width: 175px; padding-left: 10px"> <span id="ctl00_placeholdermain_dlfields_ctl00_lbldestinationfield">notes</span> </td> <td class="ms-formbody" style="width: 485px"> <input name="ctl00$placeholdermain$dlfields$ctl00$txtsource" type="text" id="ctl00_placeholdermain_dlfields_ctl00_txtsource" class="ms-input" style="width:230px" /> <select name="ctl00$placeholdermain$dlfields$ctl00$ddlsourcefields" id="ctl00_placeholdermain_dlfields_ctl00_ddlsourcefields" class="ms-input"> <option value="some field name 1">some field name 1</option> <option value="some field name 2">some field name 2</option> <option value="some field name 3">some field name 3</option> <option value="some field name 4">some field name 4</option> </select> <a href="#" id="appendselect">append</a> </td> </tr> </td> </tr><tr> <td> <tr> <td class="ms-formlabel" style="width: 175px; padding-left: 10px"> <span id="ctl00_placeholdermain_dlfields_ctl01_lbldestinationfield">url</span> </td> <td class="ms-formbody" style="width: 485px"> <input name="ctl00$placeholdermain$dlfields$ctl01$txtsource" type="text" id="ctl00_placeholdermain_dlfields_ctl01_txtsource" class="ms-input" style="width:230px" /> <select name="ctl00$placeholdermain$dlfields$ctl01$ddlsourcefields" id="ctl00_placeholdermain_dlfields_ctl01_ddlsourcefields" class="ms-input"> <option value="some field name 1">some field name 1</option> <option value="some field name 2">some field name 2</option> <option value="some field name 3">some field name 3</option> <option value="some field name 4">some field name 4</option> </select> <a href="#" id="appendselect">append</a> </td> </tr> </td> </tr> </table></div> after postback , datalist reloaded, jquery doesn't work anymore. no errors, nothing. don't see actual changes in objects in html should cause this. how fix this? workarounds or bandaides can apply? jquery below
<script type='text/javascript'> $(document).ready(function () { $('#mylist a').live("click", function () { var $selectvalue = $(this).siblings('select').val(); var $thatinput = $(this).siblings('input'); var val = $thatinput.val() + ' |[' + $selectvalue + ']|'; $thatinput.val(jquery.trim(val)); }) }); </script> thanks!!
if guess @ problem when reload data severing link of event object. though code linking id not specific element in dom. jquery under covers putting event on each object selector finds. if re-render section of html had object in it. need reconnect event new html. javascript use more this.
<script type='text/javascript'> function eventregistration() { $('someselectohere').click(workfunction); } function workfunction() { //randome code here yoru work. //if no callback function used. eventregistration() //if there call function server put eventregistration() in function. } $(document).ready( eventregistration()); </script> this how solved problem when had it.
Comments
Post a Comment