потери JQuery делегированного Обработчик события

Question

Я делать некоторые вещи, когда измененная в больше появляться TextBox в GridView .. Так что я имею:

$(function() { 
    $('.mGrid').on('change', 'input[id*="txtValore"]', function() { 
     alert('CHANGE!!'); 
     (...) 
    }); 
}); 

Ситуация:

<asp:UpdatePanel ID="FlussiPagamento" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
     (...) 
     <asp:Panel ID="pnlHome" runat="server"> 
      (...) 
      <asp:GridView ID="gridPrincipale" CssClass="mGrid"> 
       (...) 
       <asp:TemplateField> 
        <ItemTemplate> 
         <asp:TextBox ID="txtValore" Text='<%# string.Format("{0:N}", Eval("Valore"))%>' 
         runat="server" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
       (...) 
      </asp:GridView> 
      (...) 
     </asp:Panel> 
     <asp:Panel ID="pnlDettaglio" Visible="false" runat="server"> 
      (...) 
      <asp:GridView ID="grid" CssClass="mGrid"> 
       (...) 
       <asp:TemplateField> 
        <ItemTemplate> 
         <asp:TextBox ID="txtValore" Width="90%" Text='<%# string.Format("{0:N}", Eval("Valore"))%>' runat="server" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
       (...) 
      </asp:GridView> 
      (...) 
     </asp:Panel> 
     (...) 
    </ContentTemplate> 
</asp:UpdatePanel> 

Вынесено как это:

<div id="ctl00_MainContent_UpdatePanelID"> 
    (...) 
    <div id="ctl00_MainContent_pnlHome"> 
     <table class="mGrid" id="ctl00_MainContent_gridPrincipale"> 
      (...) 
      <tr> 
       <td> 
        <input name="ctl00$MainContent$grdFlusso$ctl02$txtValore" type="text" value="1.920.442,73" id="ctl00_MainContent_gridPrincipale_ctl02_txtValore" /> 
       </td> 
      </tr> 
     </table> 
    </div> 
    (...) 
    (This part when Visible=true) 
    <div id="ctl00_MainContent_pnlDettaglio"> 
     (...) 
     <table class="mGrid" id="ctl00_MainContent_grid"> 
      <tbody> 
       (...) 
       <tr> 
        (...) 
        <td> 
         <input name="ctl00$MainContent$grid$ctl03$txtValore" value="1.693,44" id="ctl00_MainContent_grid_ctl03_txtValore" onchange="test(this.id)" type="text"> 
        </td> 
        <td> 
         <input name="ctl00$MainContent$grid$ctl03$txtRicalcolato" value="169,34" id="ctl00_MainContent_grid_ctl03_txtRicalcolato" onchange="test(this.id)" type="text"> 
        </td> 
        (...) 
        <td> 
         <span id="ctl00_MainContent_grid_ctl03_lblDelta">-1.524,10</span> 
        </td> 
        (...) 
       </tr> 
       (...) 
      </tbody> 
     </table> 
     (...) 
    </div> 
    (...) 
</div> 

В первом GridView Я также ImageButton, что делает второй griview DataBound и переключите панели V На второй панели у меня есть еще один ImageButton, вне GridView, который делает обратное. Я думаю, что оба они делают обратную передачу, потому что я вижу, что вся страница перезагружается. Теперь это поведение, когда первый раз, когда страница загружается, если я изменяю первый текст TextBox сетки, я могу видеть предупреждение. После того, как я щелкнул ImageButton и переключился на вторую панель, событие не запускается, когда меняет текст во второй сетке, и если я вернусь на первую панель, это не сработает даже не с первой. Что может быть проблемой ?

Answer 1

Если кнопка «которая переключает панель» заменяет текущую сетку, вам нужно передать его обратно в высшего не-изменяющегося предок:

например document

$(function() { 
    $(document).on('change', '.mGrid input[id*="txtValore"]', function() { 
     alert('CHANGE!!'); 
     (...) 
    }); 
}); 

Теперь это звучит ... если какое-либо событие изменения пузырей до document, запустить селектор '.mGrid input[id*="txtValore"]', чтобы найти элемент, который ее вызвал, затем огня функции против этого элемента.

Примечание:document только ваш запасной вариант по умолчанию, если ничего другого не ближе , что не меняет. Не используйте 'body', поскольку стилизация может привести к тому, что он не получит пузырьковые события мыши.