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;
});

因此，结果将被解析为每个结果的表格。在该表中是一个带有提交按钮的表单。 e.g：

<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

首先，您点击＆＃34;一个按钮，你不要提交＆＃34;它。您提交表格。所以你应该使用这个活动＆＃34;点击＆＃34;。

其次，如果使用AJAX加载应触发jQuery代码的按钮，则应使用.live（）函数绑定事件，如下所示：

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

这种方式将click事件绑定到每个新对象，其中class =＆＃34; updateSubsButtons＆＃34;即使在加载页面后也会加载。如果你使用$（＆＃39; .identifier＆＃39;）。click（）它只适用于页面加载时已加载的对象，并且不适用于通过AJAX加载的元素。

JQuery / Ajax表单没有提交

2 个答案: