2

PHPでループを使用して、CMSの管理セクションにユーザーのデータを表示しています。各行（ユーザー）には、コマンドに接続したいいくつかのアイコンが含まれています（例：編集、削除など）。テーブルの最後の行には、新しいユーザーを追加できるようにするための単一のアイコン（コマンド）が付いた空の入力フィールドがあります。これがusersテーブルのHTMLです...

<div id="wrap">
<form method="post" id="form_users">
    <div class="table">
        <div class="row header">
            <div class="columns icons"></div>
            <div class="columns data">Username</div>
            <div class="columns data">First Name</div>
            <div class="columns data">Last Name</div>
            <div class="columns data">Email</div>
            <div class="clear"></div>
        </div><!-- .header -->
        <div class="row odd">
            <div class="columns icons">
                <input type="hidden" name="userID" value="0000000010" />
                <input type="image" src="../img/icons/delete_16.png" name="submit" value="delete" />
                <a href="?action=edit&userID=0000000010" class="edit"></a>
            </div>
            <div class="columns data">admin</div>
            <div class="columns data">david</div>
            <div class="columns data">kirkland</div>
            <div class="columns data">awesome@example.com</div>
            <div class="clear"></div>
        </div>
        <div class="row even">
            <div class="columns icons">
                <input type="hidden" name="userID" value="0000000001" />
                <input type="image" src="../img/icons/delete_16.png" name="submit" value="delete" />
                <a href="?action=edit&userID=0000000001" class="edit"></a>
            </div>
            <div class="columns data">coolguy</div>
            <div class="columns data">john</div>
            <div class="columns data">doe</div>
            <div class="columns data"></div>
            <div class="clear"></div>
        </div>
        <div class="row new">
            <div class="columns icons">
                <input type="image" src="../img/icons/save_16.png" name="submit" value="new" />
            </div>
            <div class="columns data">
                <input type="text" name="user[2][username]" value="" maxlength="30" class="field new" />
            </div>
            <div class="columns data">
                <input type="text" name="user[2][first_name]" value="" maxlength="30" class="field new" />
            </div>
            <div class="columns data">
                <input type="text" name="user[2][last_name]" value="" maxlength="30" class="field new" />
            </div>
            <div class="columns data">
                <input type="text" name="user[2][email]" value="" maxlength="30" class="field new" />
            </div>
            <div class="clear"></div>
        </div>
    </div><!-- .table -->
</form>

アイコンの1つがクリックされると、jQuery/AJAXを使用してコマンドをサーバーに送信します。<form>応答は、からへの更新されたユーザーテーブル</form>です。これがjQueryです...

<script type="text/javascript">
    $(function(){

        $('input[name=submit]').click(function(event){

            event.preventDefault();

            // setup array
            var values = {};

            // which submit button was clicked
            var submit_type = $(this).val();

            if( submit_type=='new' ){

                $('form input:not(input[name=submit])').each(function(){
                    values[this.name] = $(this).val();
                });

            }else{

                $(this).siblings().not('input[name=submit]').each(function(){
                    values[this.name] = $(this).val();
                });

            }

            $.ajax({
                type: "POST",
                url: "ajax.users.php",
                data: { action: submit_type, data: values }
            }).done(function( response ) {
                $('#wrap').html(response);
            });

        });

    });
</script>

すべてが最初のアクションで機能します。上記のコードを使用して、ユーザーを削除または追加できます。アイコンをクリックすると、データがAJAXに送信されます。AJAXは適切なクエリを実行し、ユーザーテーブルを再構築します。その応答は最初のファイルに戻り、usersテーブルは更新なしで新しいusersテーブルに置き換えられます。2番目のアクションを試すまで、すべてが良好です。

2回目のクリックは何もしません。3回目のクリックでページ全体がリロードされ、アクションが再び機能します。たとえば、ページに移動し、クリックしてユーザーを削除します。それらは削除されます。クリックして別のユーザーを削除します。何も起こりません。もう一度クリックします。ページがリロードされ、削除されます。

それが重要かどうかはわかりませんが、ページが最初に読み込まれるときにPHPインクルードを使用して、AJAXが送信するのと同じファイルをインクルードします。このファイルは「ユーザーテーブル」を生成します。

<div id="wrap">
<?php include 'ajax.users.php'; ?>
</div>

私はあちこちを検索しましたが、この状況に関連するものを正確に見つけることができません。私はグーグルに私が探している答えを得るためにキーワードの正しい組み合わせを与えることができないようです。どんな助けでも大歓迎です。

4

2 に答える 2

2

$('input[name=submit]').click(function(event){その時点で存在する入力にのみバインド.clickが呼び出されます。イベント委任を使用します。

$("#wrap").on('click', 'input[name=submit]', function (event) {
于 2013-03-02T01:21:35.560 に答える
0

JavaScriptは、クリックイベントのイベントハンドラーを「input [name = submit]」セレクターに一致する要素にアタッチしますが、これはページが読み込まれた後に1回だけ行われます。

これは、セレクターに一致する他のフォームには、このハンドラーがアタッチされていないことを意味します。そのため、委任されたイベントハンドラーが必要です。

$(document).on("click","input[name=submit]",function() {...});

理想的には、クラスを使用して、このように動作する送信ボタンを識別する必要があります。そうしないと、すべての送信ボタンが同じハンドラーを使用します。

于 2013-03-02T01:22:51.480 に答える