0

我在这个问题上大发雷霆——我有一个搜索 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() 函数，但我得到了相同的结果。我真的无法弄清楚这里发生了什么，所以任何帮助都将不胜感激！

4

2 回答 2

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();
});
于 2012-10-15T15:24:30.403 回答
0

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

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

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

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

于 2012-10-15T15:47:17.513 回答