回发后丢失jQuery功能

时间:2011-02-18 15:21:58

标签: jquery asp.net postback

我看到有很多人在网上报道此问题,但没有实际的解决方案。我没有使用AJAX或更新面板,只是一个回复所选索引更改的下拉列表。我的HTML是

<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>

上面的Div标签是静态的,表是从DataList对象生成的。在回发时,数据列表使用新数据集重新加载,例如

<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>

在回发和重新加载datalist之后,我的JQuery不再起作用了。没有错误,没有。我没有在HTML中看到任何应该导致这种情况的对象的实际更改。我该如何解决?我可以申请任何变通方法或乐队?我的JQuery在

之下
<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>

谢谢!

3 个答案:

答案 0 :(得分:4)

如果我在重新加载数据时猜测您的问题,则会将事件的链接切断到对象。即使您的代码链接到ID而不是DOM中的特定元素。封面下的jQuery将该事件放在选择器找到的每个对象上。如果你重新渲染其中包含该对象的html部分。您需要将该事件重新连接到新的html。我将用于此的javascript看起来更像是这样。

<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>

这就是我解决问题的方法。

答案 1 :(得分:2)

只是一个猜测但是,如果您通过UpdatePanel导致部分回发,则文档就绪将不会再次触发。你将需要使用pageLoad函数,它将在所有回发后全部和部分触发...

function pageLoad() {
   //your code here
}

编辑: 我看到你正在使用.live所以我上面的答案可能不适用但是pageLoad在部分回发场景中确实有用

答案 2 :(得分:0)

我之前遇到过类似的问题(特别是在Internet Explorer上)。这不是一个很好的解决方法,但您可以尝试的一件事是重新运行JavaScript以在加载新DOM元素后添加点击处理程序。