Javascript jQuery使用html表进行响应,其中包含(每行中的表单加上编辑每行的jQuery代码)新创建的表单忽略提交()

Javascript jQuery使用html表进行响应,其中包含(每行中的表单加上编辑每行的jQuery代码)新创建的表单忽略提交(),javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,三天了,我找不到答案或解决办法。我远不是一个jQuery的家伙 用户到达一个php页面,该页面显示选择语言代码并提交的表单。表单被提交,jQuery响应在原始页面的div容器中构建一个表。到现在为止,一直都还不错。生成的表包含数百行,可以在其中编辑语言变量。点击编辑按钮,我什么也得不到,控制台中没有错误,什么也得不到。如果我使用on click,我可以发出警报。在submit、bind和其他许多方面都不起作用 我正在尝试加载表,执行基本编辑,将编辑提交到数据库,并用编辑的结果刷新div.tabl

三天了,我找不到答案或解决办法。我远不是一个jQuery的家伙

用户到达一个php页面,该页面显示选择语言代码并提交的表单。表单被提交,jQuery响应在原始页面的div容器中构建一个表。到现在为止,一直都还不错。生成的表包含数百行,可以在其中编辑语言变量。点击编辑按钮,我什么也得不到,控制台中没有错误,什么也得不到。如果我使用on click,我可以发出警报。在submit、bind和其他许多方面都不起作用

我正在尝试加载表,执行基本编辑,将编辑提交到数据库,并用编辑的结果刷新div.table.row。我还没有到达使用编辑的数据刷新行的部分,仍然在尝试提交每行中的动态表单

有一件有趣的事情发生在我使用onclick时,它只与我单击的第一个按钮一起工作,它以某种方式禁用了所有其他行。我需要能够提交一行以进行更改,刷新该行并移动到下一行,而无需重定向。这要求太高了吗?还是我应该把它们从一页移到另一页

ajax php页面使用以下代码返回表:

if(!empty($_POST['edit_language']) && $_POST['edit_language'] == 1){
    edit_language($_POST['lang']); //call function to edit language
} else {
    echo "You got here but no variables<br>"; //testing
    print_r($_POST); //testing
}

function edit_language($lang){  
//query table to get language vars list
    $sql = "SELECT lang_site.lid, lang_codes.iso_code, lang_codes.`language`, lang_varnames.varid, lang_varnames.varname, lang_site.varval FROM lang_codes LEFT JOIN lang_site ON lang_site.langid = lang_codes.langid LEFT JOIN lang_varnames ON lang_site.varid = lang_varnames.varid where lang_codes.iso_code = '" . $lang . "'";
    $result = db_query($sql);
//generate report table
    echo "<table cellspacing='0' border='1'><tr><th>Count</th><th>Language</th><th>Variable Id</th><th>Variable Name</th><th>Variable Value</th><th>Edit</th></tr>";
    $a=1; //count the rows to number the rows for easy viewing
    while($data = db_fetch_assoc($result)){
//create form in each tr
        echo "<form name='edit_" . $data['lid'] . "' id='edit_" . $data['lid'] . "' action=''><tr><td>" . $a++ . "</td><td>" . $data['language'] . "</td><td>" . $data['varid'] . "</td><td>" . $data['varname'] . "</td><td><textarea class='form-control' name='varval' id='varval' cols='100' wrap='virtual'>" . $data['varval'] . "</textarea></td><td id='editresponse'><button type='submit' class='button' type='submit' id='but_" . $data['lid'] . "'>Edit</button></td></tr></form>";
?>
//jquery to post edits
    <script language="javascript">
        $(document).ready(function()
        {    //using $.ajax() function
        //alert("document ready"); //this alerts each row

//this function will not work, no errors, simply nothing
            $(document).on("submit", "#edit_<?php echo $data["lid"]; ?>", function(e)
            {
        //alert("button clicked");  //this does not work
                    var data = $("#edit_<?php echo $data["lid"]; ?>").serialize();
                    $.ajax({
                        type : "POST",
                        url  : "/lang/ajax_langs.php",
                        data : data,
                        success :  function(response)
                        {       
                            {
                                $("#editresponse").html(response);                    
                            };  
                        }
                    });
                    e.preventDefault();
                });
            });
    </script>
<?php
    }
    echo "</table>";
}
?>
如何让jQuery提交每行中的单个表单以进行编辑,然后在编辑语言时单独刷新每行?我需要向每一行添加另一个表单来删除一个条目,然后动态删除该行,但是我被困在这里,无法提交任何这些表单


我应该补充一点,这个生成的表单在网站上显示得很好,但在ViewSource中没有显示。使用chrome浏览器。我愿意接受任何建议。提前感谢您的阅读。我真的希望我能在这里找到解决办法。否则,我将回到90年代使用此软件。

它不起作用,因为您只提交了一个id。您需要使每个表单属于同一类。因此,将处理单击的任何表单。像

<form class="myForm" .....
然后,使用inputToChange.value=您想在表单input或其他div/td等中输入的任何新值。如果您想更改不在输入中的数据,只需将该td设置为文本输入,并禁止客户端对其进行编辑

<input type="text" name="lname" disabled>
然后在回调时将新数据发送到this.lname.value=许多其他方法也可以这样做


不要忘记,如果您通过ajax发送,您希望阻止表单本身提交,因此请使用e.preventDefault

谢谢您的回答。只是试了一下,还是一无所获。甚至一个错误都没有。我一开始就试过了,但是有几百行,我想我需要确保每个表单都有自己的标识符,以免混淆任何表单。我的问题有什么不对吗?我没有得到答案?我想感谢大家的帮助,似乎用户vbudo是唯一一个试图回答我问题的人,所以我会将其标记为已回答并投票给他。我会回到潜伏状态。
<input type="text" name="lname" disabled>