Losing jQuery functionality after postback

I have seen a TON of people reporting this issue online, but no actual solutions. I'm not using AJAX or updatepanels, just a dropdown that posts back on selected index change. My 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 is static, and the table is generated from a DataList object. On postback the datalist reloads using a new dataset, for 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&开发者_JS百科gt;
</table></div>

After the postback and the datalist is reloaded, my JQuery doesn't work anymore. No errors, nothing. I don't see any actual changes in the objects in the HTML that should cause this. How do I fix this? Any workarounds or bandaides I can apply? My JQuery is 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 I was to guess at your problem when you reload the data you are severing link of the event to the object. Even though your code is linking to an ID not an specific element in the DOM. jQuery under the covers is putting that event on each object that the selector finds. If you re-render a section of html that had that object in it. You will need to reconnect that event to the new html. The javascript I would use for this would look more like this.

<script type='text/javascript'>
function eventRegistration()
{
    $('someSelectoHere').click(WorkFunction);
}
function WorkFunction()
{
    //Randome code here to do yoru work.
    //If no callback function is used.
    eventRegistration()
    //if there is a call back function from the server put the eventRegistration() in that function.
}

$(document).ready( eventRegistration());
</script>

This is how I solved your problem when I had it.

Just a guess but, if you are causing a partial postback via an UpdatePanel, then document ready will not fire again. you will need to use the pageLoad function instead which will fire after all postbacks, full and partial...

function pageLoad() {
   //your code here
}

EDIT: I see that you are using .live so my answer above may not apply but pageLoad does become useful in partial postback scenarios

I've ran into similar issues with live before (particularly on Internet Explorer). This is not a great workaround, but one thing you can try is to re-run the JavaScript to add the click handler after loading the new DOM elements.