1

div があるページがあります。その div のコンテンツはインクルード ページによって入力されており、そのインクルード ページはコンテンツを取得するためにデータベースを呼び出しています。

ユーザーが「タスクの追加」ボタンをクリックすると、コンテンツをデータベースに挿入する ajax 呼び出しが行われ、すべてのタスクを表示する div が .load() で更新されます。「削除タスク」についても同じプロセスが発生します。データベースから行を削除する別の ajax 呼び出しが行われ、.load() を使用して div が更新されます。

データベース テーブルに挿入と削除が表示されますが、フロントエンドが少し不安定です。ページが最初に読み込まれると、無制限の数の「追加」アクションを実行でき、すべての新しいタスクが div に表示されます。ただし、実行できる「削除」アクションは 1 つだけです。最初の試行の後、div から要素を選択できないようです。

「追加」コードは次のとおりです。

$("#accept_new_task").click(function(){
    jQuery.ajaxSetup({async: false});

    //Make ajax call
    $.post("[url]", { [data] },

        //If successful, add a new item to task list and clear input
        function(data) {

            //Clear input
            $("#new_task_name").val('');
            $("#new_task_description").val('');

            //Show new task
            $('#newly_added_tasks').load('[page on server]', function() {
            });             



        });

    jQuery.ajaxSetup({async: true});    
});

そして「削除」コード：

//Deletes recently added task
$(".newtask").click(function(){
    alert('!');  //to test
    var val = $(this).attr('value');

    jQuery.ajaxSetup({async: false});

    //Make ajax call
    $.post("[url]", { [data] },

        //If successful, refresh div 
        function(data) {
            $('#newly_added_tasks').load('[page on server]', function() {
                alert('Load was performed.');
            });                             
        });     

    jQuery.ajaxSetup({async: true});  

});

ロードされるコンテンツは、データベース呼び出しから抽出されたコンテンツで生成されたテーブルです。ここにスニペットがあります：

<td>'.$task[$i]['name'].'</td>
<td>'.$task[$i]['description'].'</td>
<td><input type="button" class="newtask" name="accept_new_task" id="task_'.$task[$i]['task_id'].'" value="'.$task[$i]['task_id'].'"></td>

どんな助けでも大歓迎です。

4

3 に答える 3

3

jQuery .click イベントはライブ イベントではないため、クリック可能に割り当てられた項目のみを作成します。これらのアイテムが更新、削除、または新しいアイテムを受け取ると、更新されたアイテムにはクリック イベントがなく、新しいアイテムにはクリック イベントがありません。

.live イベントの代わりとなるjQuery .onイベントを使用することをお勧めします。そうすれば、コンテンツが更新されても、クリック イベントが添付されたままになります。

もう 1 つのオプションは、コンテンツが更新されるたびにクリック イベントを割り当てることです。

于 2012-01-25T20:02:02.070 に答える
1

この行を変更

$(".newtask").click(function(){

に

$(document).on(".newtask","click",function(){

またはデリゲートを使用

$(document).delegate("click",".newtask",function(){

理由は、動的に追加された要素自体がイベント ハンドラーにアタッチされないためです。jQuery 1.7 以降onを使用している場合は使用します。delegate

于 2012-01-25T20:03:28.987 に答える
0

これで動作します

$(document).on("click",".newtask",function(){

また

$(document).delegate(".newtask","click",function(){
于 2013-10-25T19:00:43.783 に答える