Jquery не работает с MultiView

У меня есть div внутри MultiView, который находится внутри UpdatePanel. Когда я нажимаю кнопку внутри UpdatePanel, выполняется обратный вызов, и появляется div, но он не меняет свой цвет при наведении курсора мыши (jquery не работает).

Если я помещаю div вне UpdatePanel, jquery работает правильно.

В чем здесь может быть проблема?

Спасибо

<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<script type="text/javascript">
    $(document).ready(function () {
        $("#MyDiv").hover(function () { $(this).css({ 'background-color': 'Red' }) });
    });     

</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:MultiView runat="server" ID="mvPopup">
            <asp:View ID="View1" runat="server">
              <div id="MyDiv">Some text here</div>
            </asp:View>
        </asp:MultiView>
        <asp:LinkButton runat="server" OnClick="btnLink_Click" ID="btnLink" Text="Click here" />
    </ContentTemplate>
</asp:UpdatePanel>

protected void btnLink_Click(object sender, EventArgs e)
    { 
        mvPopup.ActiveViewIndex = 0;
    }

jquery asp.net multiview
person Elistan    schedule 19.04.2011    source источник
comment
В вашем событии .hover есть только одна функция. Либо используйте два (один, когда мышь входит, другой, когда она уходит), или используйте mouseover.   -  person Blender    schedule 19.04.2011

Ответы (5)


arrow_upward
3
arrow_downward

Попробуйте использовать .live, так как div не находится на странице при первой загрузке документа:

$(document).ready(function () {
        $("#MyDiv").live("hover", function () { $(this).css({ 'background-color': 'Red' }) });
    });

Если вы хотите сделать что-то другое после наведения, попробуйте выполнить привязку как к mouseover, так и к mouseout:

$('#MyDiv').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});
person amurra    schedule 19.04.2011
comment
Еще один вопрос: если я использую each() для установки некоторых начальных параметров для html-элементов (ширина, высота и т. д.) в document.ready, как можно использовать each() (или некоторые эквиваленты) с такой функцией, как live () в этом случае, когда я загружаю контент после document.ready? - person Elistan; 19.04.2011
comment
Ответ находится здесь encosia.com /2009/03/25/ - person Elistan; 19.04.2011

arrow_upward
3
arrow_downward

Вы можете использовать обработчик событий Sys.Application.add_load для выполнения клиентского сценария после завершения обратной отправки ajax. Вы, вероятно, не хотите обертывать его в Document Ready, просто поместите свой код jquery в простую функцию и вызовите его из AjaxLoadComplete().

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">

    Sys.Application.add_load(AjaxLoadComplete);

    function AjaxLoadComplete() {
        //Call your jquery methods here
    }


</script>

Кроме того, убедитесь, что вызов add_load() следует за тегом scriptmanager. Вы не можете поместить его в заголовок, потому что объект SYS еще не существует.

person Rich M    schedule 04.05.2011

arrow_upward
2
arrow_downward

Я полагаю, что панель обновлений вводит контент асинхронно, то есть он размещается на странице после запуска события document.ready. Таким образом, вы привязываетесь к этому событию после того, как оно уже произошло. Попробуйте удалить часть document.ready и посмотреть, работает ли это.

РЕДАКТИРОВАТЬ: Или просто используйте live, как предложили другие. Это, наверное, лучше всего. Я почти уверен, что мои рассуждения верны, почему это не работает!

person Adam Terlson    schedule 19.04.2011

arrow_upward
1
arrow_downward

Проблема в том, что при создании div скрипт jquery уже запущен. Попробуйте выполнить привязку к свойствам наведения и удаления мыши с помощью метода jquery live.

person joe_coolish    schedule 19.04.2011

arrow_upward
0
arrow_downward

Еще одна вещь может заключаться в том, что .Net переписывает идентификатор ваших элементов, поэтому ваш jquert не может найти правильный идентификатор.

с веб-формами .Net попробуйте использовать следующий селектор в jquery $("[id$='MyDiv']")

person TheAlbear    schedule 19.04.2011