javascript - 使用 jQuery 获取通过 DOM 操作插入的表单元素的值

Question

我正在寻找一种解决方案来获取输入复选框的值，这些复选框是使用 jQuery 在表单中使用 .html() 插入的。

我不是在寻找 $('#form').serialize();解决方案，在这种情况下不起作用。

复选框的创建方式

$.each(ds.result, function(k,user) {
    rows += '<tr><td><input type="checkbox" name="sel'+user['id']+'"></td><td><button onclick="edituser(\''+user['id']+'\',\''+user['fullname']+'\',\''+user['gender']+'\',\''+user['birthyear']+'\',\''+user['location']+'\',\''+user['email']+'\',\''+user['phone']+'\');">Edit</button></td><td>'+user['fullname']+'</td><td>'+user['gender']+'</td><td>'+user['birthyear']+'</td><td>'+user['location']+'</td><td>'+user['xtimelogin']+'</td></tr>';
});
$('#filter-users-tbody').html(rows);

还有我的表格

<form method="post" id="form-select-users">
<tbody id="filter-users-tbody"></tbody>
</form>

到目前为止我尝试了什么

function getusers() {
    alert('here');
    console.log($("#form-select-users").serialize());
    console.log($("#form-select-users > input").val());
    // $("#form-select-users").submit();
};

它们都不起作用

也许我漏掉了一些小东西，但我还是花了很多时间。 感谢您的帮助。

Answer 1

HTML 无效，您不能将 tbody 作为 form 的直接子项。因此，当浏览器将其整理出来时，复选框可能不在表单中。将 form 移动到整个表格周围。

问题示例:

var ds = {
    result: [
        {id: 1, fullname: "One"},
        {id: 2, fullname: "Two"},
        {id: 3, fullname: "Three"}
    ]
};
var rows = "";
$.each(ds.result, function(k,user) {
    rows += '<tr><td><input type="checkbox" name="sel'+user['id']+'"></td><td><button onclick="edituser(\''+user['id']+'\',\''+user['fullname']+'\',\''+user['gender']+'\',\''+user['birthyear']+'\',\''+user['location']+'\',\''+user['email']+'\',\''+user['phone']+'\');">Edit</button></td><td>'+user['fullname']+'</td><td>...</td></tr>';
});
$('#filter-users-tbody').html(rows);
$("input[type=button]").on("click", getusers);
function getusers() {
    console.log($("#form-select-users").serialize());
}

<table>
<form method="post" id="form-select-users">
<tbody id="filter-users-tbody"></tbody>
</form>
</table>
<input type="button" value="Click me after ticking some boxes">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

解决方案示例:

var ds = {
    result: [
        {id: 1, fullname: "One"},
        {id: 2, fullname: "Two"},
        {id: 3, fullname: "Three"}
    ]
};
var rows = "";
$.each(ds.result, function(k,user) {
    rows += '<tr><td><input type="checkbox" name="sel'+user['id']+'"></td><td><button onclick="edituser(\''+user['id']+'\',\''+user['fullname']+'\',\''+user['gender']+'\',\''+user['birthyear']+'\',\''+user['location']+'\',\''+user['email']+'\',\''+user['phone']+'\');">Edit</button></td><td>'+user['fullname']+'</td><td>...</td></tr>';
});
$('#filter-users-tbody').html(rows);
$("input[type=button]").on("click", getusers);
function getusers() {
    console.log($("#form-select-users").serialize());
    // $("#form-select-users").submit();
}

<form method="post" id="form-select-users">
<table>
<tbody id="filter-users-tbody"></tbody>
</table>
</form>
<input type="button" value="Click me after ticking some boxes">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>