Потеря функциональности jQuery после обратной передачи - PullRequest
Новая
       12

Потеря функциональности jQuery после обратной передачи

1 голос
/ 18 февраля 2011

Я видел ТОННУ людей, сообщающих об этой проблеме в Интернете, но реальных решений не было.Я не использую 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>

После перезагрузки обратной передачи и списка данных мой JQuery больше не работает.Нет ошибок, ничего.Я не вижу каких-либо реальных изменений в объектах HTML, которые должны вызывать это.Как это исправить?Какие-нибудь обходные пути или bandaides я могу применить?Мой 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 ]

4 голосов
/ 18 февраля 2011

Если бы я угадал вашу проблему, когда вы перезагружаете данные, вы разрываете связь события с объектом.Даже если ваш код ссылается на идентификатор, а не на конкретный элемент в DOM.jQuery под прикрытием помещает это событие на каждый объект, который находит селектор.Если вы повторно визуализируете раздел html, в котором был этот объект.Вам нужно будет повторно подключить это событие к новому HTML.Яваскрипт, который я бы использовал для этого, выглядел бы больше следующим образом. 

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

Вот как я решил вашу проблему, когда у меня это было.

2 голосов
/ 18 февраля 2011

Просто предположение, но если вы вызываете частичную обратную передачу через UpdatePanel, то документ, готовый снова, не сработает. вам нужно будет использовать функцию pageLoad, которая будет срабатывать после всех обратных передач, полных и частичных ... 

function pageLoad() {
   //your code here
}

EDIT: Я вижу, что вы используете .live, поэтому мой ответ выше может не применяться, но pageLoad становится полезным в сценариях частичной обратной передачи

0 голосов
/ 18 февраля 2011

Ранее я сталкивался с похожими проблемами с live (особенно в Internet Explorer). Это не хороший обходной путь, но одну вещь, которую вы можете попробовать, это перезапустить JavaScript, чтобы добавить обработчик кликов после загрузки новых элементов DOM.

...