JQuery/Ajax 表单未提交

Question

我在这个问题上大吃一惊——我有一个搜索 MySQL 数据库并在表格中返回结果的页面。我希望用户能够更新结果，从而更新 MySQL 数据库。第一部分工作正常，我在页面上有一个搜索框，它使用 jQuery/ajax 来查询数据库并显示结果，例如：

<form class="well" id="jquery-submit-ajax" method="post">
    <input type="text" name="userSearch" placeholder="Search…">
    <label>Name/Email/id</label>
    <Br />
    <input type="submit" id="searchButton" value="Search">
</form>

<div class="alert alert-success hide">
    <div id="success-output" class="prettyprint"></div>
</div>
<div id="loading-image" class="alert hide" style="text-align:center">
    <img src="../images/ajax-loader.gif" /></div>
    <div class="alert alert-error hide">
        <div id="error-output" class="prettyprint"></div>
    </div>
</div>

和 jQuery：

$("#jquery-submit-ajax").submit(function(e) {
    $('#loading-image').fadeIn();
    $.ajax({
        type: "POST",
        url: "jquery-ajax-control.php",
        data: $(e.target).serialize(),
        dataType: "html",
        beforeSend:function(){
            $('.alert-error,.alert-success').hide();
        },
        error: function(jqXHR, textStatus, errorThrown){
            $('#loading-image').hide();
            $('.alert-error').fadeIn();
            $('#error-output').html(errorThrown);
        },
        success: function(data){
            $('#loading-image').hide();
            $('.alert-success').fadeIn();
            $('#success-output').html(data);
        }
    });
    return false;
});

所以结果被解析成每个结果的表格。该表中有一个带有提交按钮的表单。例如：

<form method="post">
<table>
<tr>
    <td><input type="text" class="editbox" name="subs-expiry" value="<?php echo $expiry_date; ?>"</td>
</tr>
</table>
<input type="submit" class="updateSubsButtons" value="Update" />
</form>

我正在尝试再次通过 jQuery/Ajax 提交此表单，但无法正常工作。按下更新按钮会刷新整个页面。我已经把这个按钮的 jQuery 去掉了，只是在按下按钮时显示一个警报，但即使这样也不起作用。

$(".updateSubsButtons").on("submit", function(e){
    alert("clicked");
    e.preventDefault();
});

使用 Chrome 调试器，函数中的断点永远不会被命中，所以也许 jQuery 找不到按钮？我已经尝试过 .on() 和 .live() 函数，但我得到了相同的结果。我真的不知道这里发生了什么，所以任何帮助都将不胜感激！

Answer 1

尝试将其替换为按钮和“点击”事件。

<button class="updateSubsButtons">Update</button>


$(".updateSubsButtons").on("click", function(e){
    alert("clicked");
    console.log(e);
    e.preventDefault();
});

这是处理异步加载项的方法（添加是因为这是实际解决问题的方式。）：

$(".AlreadyLoadedParent").on("click",'.buttonYouWantToClick', function(e){
    alert("clicked");
    console.log(e);
    e.preventDefault();
});

Answer 2

首先，您“单击”一个按钮，而不是“提交”它。您提交表格。所以你应该使用“点击”事件。

其次，如果应该触发 jQuery 代码的按钮是使用 AJAX 加载的，您应该使用 .live() 函数绑定事件，如下所示：

$('.updateSubsButtons').live('click', function(e) {
    e.preventDefault();
    // Your code here...
}

这样，即使在页面加载后，click 事件也会绑定到每个新对象，其 class="updateSubsButtons" 也会加载。如果您使用 $('.identifier').click() 它仅适用于页面加载时已加载的对象，而不适用于通过 AJAX 加载的元素。