JQuery - 변경 이벤트를 연결할 수 없습니다.

Question

MVC 응용 프로그램에서 양식이 있고 2 개의 비동기식 AJAX 호출을 만듭니다. 1은 새 페이지의 데이터를 가져오고 다른 하나는 검색 결과를 표시합니다. 이 호출 이전에 폼의 초기로드가 정상입니다. 나는 행 바를 색칠하고 싶다.

$("#tblePagedList").on("change", styleRows); 

function styleRows() { 
    $("#tblePagedList tr:even").addClass("row1"); 
    $("#tblePagedList tr:odd").addClass("row2"); 
} 

그러나 새 페이지로 이동하거나 검색을 수행하면 이러한 스타일이 적용되지 않습니다. 변경 시도를 시도하는 시도가 실패합니다.

$("#tblePagedList").on("change", styleRows); 

또는

즉

$("#tblePagedList").change(styleRows); 

내 표는 아래와 같다;

<table id="tblePagedList"> 
    <thead> 
     <tr> 
      <th> 
       Company 
      </th> 
      <th> 
       Address 
      </th> 
      <th style="width:100px;"> 
       Telephone 
      </th> 
      <th style="width:100px;"> 
       Contact 
      </th> 
      <th style="width:100px;"> 
       Trade 
      </th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody id="tblePagedListBody"></tbody> 
    @foreach (var item in Model) { 
     <tr> 
      <td> 
       @item.Company 
      </td> 
      <td> 
       @item.AddressLine 
      </td> 
      <td> 
       @item.Telephone 
      </td> 
      <td> 
       @item.Contact 
      </td> 
      <td> 
       @item.TradeName 
      </td> 
      <td> 
       @Html.ActionLink("Details", "DetailsSubcontractor", new { id = item.CompanyId }) 
      </td> 
     </tr> 
    } 

Answer 1

On Change event은 DOM이 변경 될 때가 아니라 입력 값이 변경 될 때 트리거됩니다.

`$("#tblePagedList").on("update", handler)` 

및 AJAX 호출이 성공할 때 수동으로 트리거 : 당신이 이벤트가 필요한 경우, 나는 업데이트 현실을 부르 자, 사용자 정의를 등록 할 것

`$("#tblePagedList").trigger("update")` 

을하지만 난 당신 있는지 확실하지 않습니다 정말로 이벤트가 필요합니다. 아마도 styleRows을 AJAX 콜백으로 호출하면 충분합니까?

그리고 정말로 idea of ​​events가 좋다면 BackboneJS로 전환하는 것을 고려해보십시오. 가져온 데이터를 콜렉션에 저장하고 콜렉션 업데이트 이벤트에 연결하여 해당 이벤트에 대한 테이블을 렌더링 할 수 있습니다.

은 BTW 두 이후 styleRows 호출 된 클래스 제거, 잘못된 결과를 얻을 수 있습니다

 
function styleRows() { 
    $("#tblePagedList tr:even").removeClass("row1 row2").addClass("row1"); 
    $("#tblePagedList tr:odd").removeClass("row1 row2").addClass("row2"); 
}