0

我的 HTML 页面中有几个表单，它们的提交是由 jQuery 函数促进的。他们工作得很好。但是，我遇到了动态创建的表单的问题。它们不是通过 jQuery 提交，而是发布到当前的 HTML 页面。

例如，我有一个使用 PHP 动态创建的表。该表可以更新，因为它包含在表格中。

下面是生成表格的代码：

//Display table
            echo "<form id=\"UpdateUsers\" method=\"post\">";
            echo "<table>
                <thead>
                <tr>
                    <th>User Id </th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Current Publisher</th>
                    <th>User Priveleges</th>
                </tr>
            </thead>
            <tbody>
            <tr>";

                foreach($publishers as $row)
                    foreach($row as $col)
                    {
                        $i++;

                        switch ($i) { 
                            case 4: //Is it a current publisher?
                                if($col == 0) 
                                    echo "<td><input type=\"checkbox\" class=\"current\" name=\"UserState[$row[0]]\" value=\"1\" ></td>\n";
                                else
                                    echo "<td><input type=\"checkbox\" class=\"current\" name=\"UserState[$row[0]]\" value=\"1\" checked> </td>\n";
                                break;

                            case 5: //Do they have user priveleges?
                                if($col == 0)
                                    echo "<td>No</td>\n";
                                else
                                    echo "<td>Yes</td>\n";
                                echo "</tr><tr>"; //start a new row
                                $i=0; //reset counter
                                break;

                            default:
                                echo "<td>$col</td>\n";     
                        }
                    }
                echo "</tr></tbody></table>";   
                echo "<button type=\"submit\">Update</ button>";
                echo "</form>";
        }

表格id很清楚UpdateUsers。

这是 jQuery 代码：

$(document).ready(function () {
$('#UpdateUsers').submit(function (e) {
    e.preventDefault();
    $('#results').contents().remove();

    //Make sure all checkboxes are submitted
    var cb = this.getElementsByTagName('input'); //Get the inputs
    for(var i=0;i<cb.length;i++){ 
        if(cb[i].type=='checkbox' && !cb[i].checked)  // if this is an unchecked checkbox   
        {
            cb[i].value = 0; // set the value to "off"
            cb[i].checked = true; // make sure it submits
        }
    }

    var formData = $(this).serialize();
    $("input").prop("disabled", true);
    request = $.post('VRC_PublishersProcess.php', formData, resultsMessage);
    request.fail(function() { 
        $('#results').append("<span id=\"reply\">Updating failed for an unknown reason. Please try again in a few minutes.</ span>");           
        $("input").prop("disabled", false); });


    function resultsMessage(data) {
        $('#results').append(data);
        $("input").prop("disabled", false);
    }
});
});

这个 jQuery 函数过去曾使用过，因此它应该是有效且可运行的代码；我怀疑这是问题的根源。

我的怀疑是，当浏览器加载时，它正在处理和“链接”jQuery 和 HTML 代码。一旦一个新的表单动态出现，浏览器就不知道有一个 jQuery 函数来处理提交请求。

如果确实如此，我该如何修改我当前的代码以使其行为正确。也就是说，允许 jQuery 处理 post 请求。

任何输入表示赞赏。

这就是我所说的动态创建：

(1) 用户在当前 HTML 页面上提出请求：

   <div id="pub1">
            <a href="#" class="drop" id="one">Other</a>
            <div id="displayselect">
                <form id="select1" method="post">
                    <input type="hidden" name="All" value="1" />
                    <input type="submit" name="All" value="All Publishers" />
                </form>
                <form id="select2" method="post">
                    <input type="hidden" name="Current" value="1" />
                    <input type="submit" name="Current" value="Current Publishers" />
                </form>
                <form id="select3" method="post">
                    <input type="hidden" name="Users" value="1" />
                    <input type="submit" name="Users" value="User Priveleges" />
                </form>
           </div>
        </div>

(2) 请求由 jQuery 处理 - 它将 post 请求发送到 php 页面，然后生成表（这是三个相同的 jQuery 函数之一）：

$(document).ready(function () {
$('#select3').submit(function (e) {
    e.preventDefault();
    $('#results').contents().remove();
    var formData = $(this).serialize();
    $("input").prop("disabled", true);
    request = $.post('VRC_PublishersProcess.php', formData, resultsMessage);
    request.fail(function() { 
        $('#results').append("<span id=\"reply\">Your search failed for an unknown reason. Please try again in a few minutes.</ span>");            
        $("input").prop("disabled", false); });


    function resultsMessage(data) {
        $('#results').append(data);
        $("input").prop("disabled", false);
    }
});
});

(3) 注意上面的jQuery函数是处理服务器反馈的。它在 id 的 div 中显示该反馈results。

4

1 回答 1

1

第一个脚本

$(document).ready(function () {
$(document).on('submit','#UpdateUsers',function (e) { // delegated event with fixed els!
    e.preventDefault();
    $('#results').contents().remove();

    //Make sure all checkboxes are submitted
    var cb = this.getElementsByTagName('input'); //Get the inputs
    for(var i=0;i<cb.length;i++){ 
        if(cb[i].type=='checkbox' && !cb[i].checked)  // if this is an unchecked checkbox   
        {
            cb[i].value = 0; // set the value to "off"
            cb[i].checked = true; // make sure it submits
        }
    }

    var formData = $(this).serialize();
    $("input").prop("disabled", true);
    request = $.post('VRC_PublishersProcess.php', formData, resultsMessage);
    request.fail(function() { 
        $('#results').append("<span id=\"reply\">Updating failed for an unknown reason. Please try again in a few minutes.</ span>");           
        $("input").prop("disabled", false); });


    function resultsMessage(data) {
        $('#results').append(data);
        $("input").prop("disabled", false);
    }
});
});

由于表单是动态创建的，因此您似乎需要委托该事件。试试看它.on('submit', function(e)是否有效。

于 2013-07-22T02:16:02.010 回答