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

感谢Rory的委托功能。它将在未来帮助我。

Constantin.FF。看看这个问题是否对你有帮助。我想避免使用Live功能，所以我做的事情与已经接受的答案建议略有不同。 Bind a click to a dynamic button with jQuery?

jQuery管理表数据

2 个答案: