javascript - 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 不可用)，您需要将事件委托(delegate)给静态父元素。如果您使用的是 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 附加的。如果是，请尝试不同的选择器。