Переключатель JQuery перестает работать после того, как я сделаю вызов asp.net на стороне сервера?

Question

У меня есть div с именем address, который является текстовой областью.Когда я нажимаю гиперссылку, она переключает div вверх и вниз.После нажатия кнопки asp.net div падает, и это нормально, но я заметил, что URL-адрес переходит с www.abc.com/edit.aspx?Id=2 на www.abc.com/edit.aspx?Id2=2#и теперь переключатель не работает.

Вот сценарий:

$ (документ) .ready (function () {

    $('#myAddress').click(function () {
        ShowHideAddressBox();
    });
    $('#arrowIndicator').click(function () {
        ShowHideAddressBox();
    });
});
function ShowHideAddressBox() {
    var str = $("#myAddress").text();
    if (str == "Hide") {
        $("#myAddress").html("Click here");
        $("#arrowIndicator").attr("src", "/Shared/Images/misc/arrow_state_grey_expanded.png");
    }
    else {
        $("#myAddress").html("Hide");
        $("#arrowIndicator").attr("src", "/Shared/Images/misc/arrow_state_grey_collapsed.png");
    }

    $('#checkAddress').toggle('normal');
}

Кнопка на стороне сервераclick только устанавливает некоторые значения в паре текстовых полей.

На моей главной странице также есть следующая строка:

<asp:ScriptReference Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
            Name="MicrosoftAjax.js" Path="http://ajax.microsoft.com/ajax/3.5/MicrosoftAjax.js" />

Answer 1

То, что вы видите, это то, что элементы заменяются, и у них больше нет обработчиков, вы должны заменить это:

$(document).ready(function () {
    $('#myAddress').click(function () {
        ShowHideAddressBox();
    });
    $('#arrowIndicator').click(function () {
        ShowHideAddressBox();
    });
});

С обработчиком .live(), подобным этому:

$(function () { //shortcut for $(document).ready(function () {
  $('#myAddress, #arrowIndicator').live('click', ShowHideAddressBox);
});

Answer 2

Вам необходимо запретить действие якоря по умолчанию (то есть следовать href).Если вы установили href привязки на «#» и не используете его, он добавит # к URL в адресной строке.

$('#arrowIndicator').click(function (ev) {
        ev.preventDefault();
        ShowHideAddressBox();
});

Answer 3

На самом деле вы можете использовать что-то вроде этого:

$(document).ready(function () {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    function EndRequestHandler(sender, args) {
      //Code that runs after a post back with an update panel has occurred.  
    } 
      //Code on page load.
});

Код вне функции EndRequestHandler будет таким же, как и внутри нее.

Я использовал панели обновления, когда был новна asp.net и программирование в целом.Я быстро научился использовать jQuery ajax, который является лучшим решением, чем обновление панелей.Я предлагаю вам проверить это.