JQuery клик исчезает в пропасть - PullRequest
Новая
       6

JQuery клик исчезает в пропасть

1 голос
/ 11 ноября 2010

Вот мои настройки:

У меня есть кнопка asp.net на странице - 

<asp:Button id="btnSelectEmp" runat="server" Text="Select Employee" />

У меня есть файл .js со следующим событием jQuery click - 

$("input[id$='_btnSelectEmp']").click(function ($e) {
  $("div[id$='_divEmpSearch']").css("display", "inline");
  $e.preventDefault();
});

Как вы можете видеть, нажатие на кнопку приведет к отображению div.Ничего особенного;не ракетостроение.

Div оборачивается панелью обновления asp.net и содержит пользовательский элемент управления asp.net (.ascx) 

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
  <div id="divEmpSearch" runat="server" style="display: none;">
    <uc:EmpSearch ID="ucEmpSearch" runat="server" />
  </div>
  // And a bunch of other controls that are updated according to whatever the user selects in the user control above
</ContentTemplate>
<Triggers>
  <asp:AsyncPostBackTrigger ControlID="ucEmpSearch" />
</Triggers>
</asp:UpdatePanel>

Пользовательский элемент управления выше также обернут в aspПанель обновления .net, потому что она должна общаться с сервером.Среди других элементов управления, таких как текстовые поля и тому подобное, пользовательский элемент управления имеет две кнопки: 1) кнопку asp.net, которая выполняет обратную передачу, и 2) кнопку asp.net, которая выполняет асинхронную обратную передачу. 

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      <asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" /
      <br />
      asp:Button ID="btnContinue" runat="server" Text="Select" OnClick="btnContinue_Click" />
    </ContentTemplate>
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
      <asp:PostBackTrigger ControlID="btnContinue" />
    </Triggers>
</asp:UpdatePanel>

Кнопка в пользовательском элементе управления, которая выполняет обратную передачу, работает отлично.Я щелкаю по нему, происходит обратная передача, и мой контроль div снова скрывается.Затем я могу нажать на кнопку «Выбрать сотрудника» (ту, для которой я поставил код в самом первом вопросе) , и событие нажатия jQuery будет обработано, и div будет перезапущен.

Однако кнопка в пользовательском элементе управления, которая выполняет асинхронную обратную передачу, также работает, но после того, как она скрывает div, , если я затем нажму на кнопку «Выбрать сотрудника», событие щелчка jQuery не будет обработано .

Это говорит мне о том, что по какой-то причине во время асинхронной обратной передачи на страницу что-то происходит с кнопкой «Выбрать сотрудника», так что событие щелчка jQuery больше не происходит.Почему?

Ответы [ 4 ]

1 голос
/ 11 ноября 2010

Ваша кнопка заменяется новой, когда ваша панель обновлений возвращается с новым содержимым, поэтому: 

$("input[id$='_btnSelectEmp']").click(function ($e) {

Связывает с элементами, которые она находит в то время , вместо этоговам нужно .delegate() или .live() здесь, чтобы прослушивать click события из текущих и будущих элементов, например: 

$("input[id$='_btnSelectEmp']").live("click", function ($e) {
  $("div[id$='_divEmpSearch']").css("display", "inline");
  $e.preventDefault();
});

Или немного дешевле, используя .delegate(): 

$("#container").delegate("input[id$='_btnSelectEmp']", "click", function ($e) {
  $("div[id$='_divEmpSearch']").css("display", "inline");
  $e.preventDefault();
});

В этом случае #container должен быть родительским элементом панели обновлений, а не 't заменяется в постбеке.

1 голос
/ 11 ноября 2010

Используйте функцию live(). live() делегирует событие click родительскому элементу, поэтому элемент (в данном случае btnSelectEmp) не должен существовать во время привязки события. 

$("#<%=btnSelectEmp.ClientID%>").live("click" function ($e) {
  $("#<%=divEmpSearch.ClientID%>").css("display", "inline");
  $e.preventDefault();
});

Что происходит, так это то, что кнопка btnSelectEmp заменяется асинхронным вызовом, и новый элемент не был связан с обработчиком событий.

Также я изменил селектор jquery, чтобы использовать точный идентификатор клиента элемента. Это улучшит скорость, плюс я, кажется, напомню, что некоторые селекторы не работают с делегированием событий в определенных версиях Jquery.

1 голос
/ 11 ноября 2010

попробуйте live('click', function(){...}) вместо click(function(){...})

0 голосов
/ 11 ноября 2010

Дикая догадка: "_btnSelectEmp" используется более одного раза?

...