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:

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

Это предполагает, что tbody#languages элемент в коде не добавляется с помощью JQuery. Если да, попробуйте другой селектор.

Answer 2

Thanks Rory для функции делегата. Это поможет мне в будущем.

Constantin.FF. Проверьте этот вопрос, если он вам поможет. Я хотел избежать использования функции Live, поэтому я делал что-то немного по-другому, чем предлагаемый уже принятый ответ. Bind a click to a dynamic button with jQuery?