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イベントを入力名を変更するにはどうすればいいですか？

私は、これは、テーブル内のデータを管理するための最良の方法であることを確認していないが、1つのより良いと簡単がある場合 - 提案してください。動的に追加された行については

Answer 1

（すなわち、ページの読み込みでDOMを使用できません）あなたは、静的な親要素にイベントを委任する必要があります。 1.6以上のjQueryを使用している場合は、delegate()、1.7以上を使用し、on()を使用します。

このお試しください：

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

またはjQ1.7中：この

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

は、あなたのコード内のtbody#languages要素がjQueryを介して、追加されていないことを想定しています。そうであれば、別のセレクターを試してみてください。デリゲート関数の

Answer 2

おかげロリー。それは私の将来を助けます。

Constantin.FF。それがあなたに役立つなら、この質問をチェックしてください。私はLive関数の使用を避けたかったので、私は、すでに受け入れられている答えとは少し違ったやり方をしました。 Bind a click to a dynamic button with jQuery?