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...
}

このようにして、クリックイベントは、ページが読み込まれた後でも読み込まれるclass="updateSubsButtons"を持つすべての新しいオブジェクトにバインドされます。$（'。identifier'）。click（）を使用する場合、ページの読み込み時にすでに読み込まれているオブジェクトでのみ機能し、AJAXを介して読み込まれる要素では機能しません。

于 2012-10-15T15:47:17.513 に答える