jQuery가 테이블 데이터를 관리합니다

Question

테이블 데이터를 관리하려고하는 버그가 있습니다 (사용 가능한 언어 사용). 여기에 내가 무엇을 가지고 :

HTML :

<input type="button" id="add_language" value="Add Language" /> 
    <table> 
     <tbody id="languages"> 
              <tr> 
          <td><div class="input text"><input type="text" id="Setting3Value3Language" rel="" value="English" name="data[Setting][3][value][3][language]"/></div></td> 
          <td><div class="input text"><input type="text" id="Setting3Value3Alias" rel="" value="eng" name="data[Setting][3][value][3][alias]"/></div></td> 
          <td/> 
          <td><button class="delete-lang">Delete</button></td> 
         </tr> 
     </tbody> 
    </table> 

그리고 jQuery를 : 그것은 삭제 버튼에 대한 것을 제외하고 작동되는 순간을 위해

$("#add_language").click(function(){ 
    var langId = langId + 1; 
    var row ='<tr><td><div class="input text"><input type="text" id="Setting3Value'+langId+'Language" rel="" value="" name="data[Setting][3][value]['+langId+'][language]"/></div></td><td><div class="input text"><input type="text" id="Setting3Value'+langId+'Alias" rel="" value="" name="data[Setting][3][value]['+langId+'][alias]"/></div></td><td></td><td><button class="delete-lang ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" aria-disabled="false" title="Delete"><span class="ui-button-icon-primary ui-icon ui-icon-trash"/><span class="ui-button-text">Delete</span></button></td></tr>'; 
    $('#languages').append(row); 
    return false; 
}); 

$(".delete-lang").button({ 
      icons: { 
       primary: "ui-icon-trash" 
      }, 
      text: false 
     }); 

$(".delete-lang").click(function(event){ 
    event.preventDefault(); 
    $(this).parents('tr').first().remove(); 
}); 

- 단지되었습니다 행을 삭제하는 경우 양식을 제출하면 양식이 제출되고 새로 추가 된 행에 대해서는 event.preventDefault();이 실행되지 않고 양식이 제출됩니다. 이 문제를 해결하는 방법?

또한 행 정렬뿐만 아니라 입력 내에서 name 값을 정렬하여 정렬해야합니다. 입력 이름을 변경하려면 sortable 이벤트를 만드는 방법?

이것이 테이블 안의 데이터를 관리하는 가장 좋은 방법인지는 모르겠지만 더 쉽고 간편한 것이 있다면 좋습니다.

Answer 1

동적으로 추가 된 행 (예 : 페이지로드시 DOM에서 사용할 수 없음)의 경우 정적 부모 요소에 이벤트를 위임해야합니다. JQuery 1.6 이전 버전을 사용하는 경우 delegate(), 1.7 이상을 사용하면 on()을 사용합니다.

이 시도 :

$("#languages").delegate(".delete-lang", "click", function(event) { 
    event.preventDefault(); 
    $(this).parents('tr').first().remove(); 
}); 

또는 jQ1.7에서 :이 당신의 코드에서 tbody#languages 요소가 jQuery를 통해 추가되지 않습니다 것을 가정한다

$("#languages").on("click", ".delete-lang", function(event) { 
    // rest of your code.... 

. 그렇다면 다른 선택기를 사용해보십시오.

Answer 2

대리자 기능을 사용해 주신 Rory에게 감사드립니다. 그것은 미래에 나를 도울 것입니다.

Constantin.FF. 도움이된다면이 질문을 확인하십시오. 나는 라이브 기능을 사용하지 않기를 원했기 때문에 이미 받아 들여진 대답보다 약간 다르게 작업을 수행했습니다. Bind a click to a dynamic button with jQuery?