Jquery 序列化正在为动态文本框获取相同的值

Question

我正在使用以下代码创建带有复选框的动态文本框。

function addNewModifier()
    {
        $('#modifiersList tr:last').after('<tr><td></td><td><form id="insertModifier"><input name="modifierName" id="modifierName" class="focused form-control" type="text"></input></td><td align="center"><span class="glyphicon glyphicon-folder-open" style = "cursor:pointer"></span></td><td><input name="status" id="status" type="checkbox"></input></td><td align="center"><span class="btn btn-primary" onclick="saveNewModifier()"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Save</span></td><td><span class="btn btn-default" onclick="deleteNewSuperCategory(this)"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Cancel</span></td></form></tr>'); 
    }

通过使用上述功能，我在 table 中添加了新行，然后单击保存按钮我需要表单数据。

我的保存功能如下。

function saveNewModifier()
    {
        var groupName = $("#insertModifier").serialize();
        alert(groupName);
    }

上面的 saveNewModifier() 函数只给出文本框的值，而且总是相同的。

请帮助我如何让复选框和文本框的值在创建新行时始终不同。

Answer 1

这是一个例子。这可能对你有帮助

function saveNewModifier()
    {
        var groupName = $("#insertModifier").serialize();
        var checkValue = $("#status").serialize();
        alert(groupName);
        alert(checkValue);
        
    }
function addNewModifier()
    {
        $('#modifiersList tr:last').after('<tr><td></td><td><form id="insertModifier"><input name="modifierName" id="modifierName" class="focused form-control" type="text"></input></td><td align="center"><span class="glyphicon glyphicon-folder-open" style = "cursor:pointer"></span></td><td><input name="status" id="status" type="checkbox"></input></td><td align="center"><span class="btn btn-primary" id="btnSave"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Save</span></td><td><span class="btn btn-default" onclick="deleteNewSuperCategory(this)"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Cancel</span></td></form></tr>'); 
        $(this).serialize();
    }


addNewModifier();

$(document).ready(function(){
    $("#btnSave").on('click', function() {
       saveNewModifier();
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<table id="modifiersList">
    <tr><td>Dummy Data</td></tr>
</table>

这是您问题的确切解决方案 click here

function saveNewModifier()
    {
        var groupName = $("#insertModifier").serialize();
        var checkValue = $("#status").serialize();
        alert(groupName);
        alert(checkValue);

    };

function addNewModifier()
    {
$('#modifiersList tr:last').after('<tr><td></td><td><form id="insertModifier"><input name="modifierName" id="modifierName" class="focused form-control" type="text"></input></td><td align="center"><span class="glyphicon glyphicon-folder-open" style = "cursor:pointer"></span></td><td><input name="status" id="status" type="checkbox"></input></td><td align="center"><span class="btn btn-primary" id="btnSave"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Save</span></td><td><span class="btn btn-default" onclick="deleteNewSuperCategory(this)"><i class="icon-white fa-plus-circle fa fa-align-left"></i>Cancel</span></td></form></tr>'); 
    };



$(document).ready(function(){
    $("body").on('click', '#btnSave', function() {
       saveNewModifier();
    });
});

<table id="modifiersList">
    <tr><td onclick="addNewModifier();">add new html</td></tr>
</table>

Jquery 序列化正在为动态文本框获取相同的值

Jquery serialize is getting same value for dynamic text boxes

jquery

html-table