2

jquery と ajax を使用して mysql データベースから行を削除するためのリンクを追加しようとしています。現在、データはテーブルに表示されています。何らかの理由で、Click イベントがトリガーされません。

これが私のAJAX呼び出しです：

<script>
$(document).ready(function() {
/* load table with page load*/
$("#sort tbody").load("inc/index_table.php");

/* row deletion */
$(".deletelink").click(function(){
   var id = $(this).attr("id");
   $.ajax({
        beforeSend: function (request) {
        var answer = confirm("Are you SURE you want to delete this?/nThis action is NOT reversible.")
        if (answer){ return(true); }
        else { return(false); }
        },
        type: "POST",
        url: location.href,
        data: "delete="+id,
        error: function() {
            console.log("Theres an error with AJAX deletion");
        },
        success: function(){ //a.td.tr.remove just that row rather than the whole table
            $this.parent().parent().remove();
            console.log("Deleted.");
        }
   });
}); 

});
</script>

関連する HTML: これは、データベースからテーブルを出力する while ループの一部です。

<td><a class="deletelink" id="'.$row["id"].'"><img src="images/delete.png" alt="Delete"></a></td>';

私のコードは指定<a class="deletelink">していますが、登録していません$(".deletelink").click(function(){ });

ここで何が間違っているのか、または提案する別の方法がある人はいますか?

4

4 に答える 4

4

要素を動的にロードしているようです。DOM に現在存在する要素にのみバインドできます。追加しようとしている要素にバインドするには、イベントを静的要素にアタッチする必要があります。動的コンテンツに近いほど良いです。

デリゲートでon()を使用してみてください。

$("#sort tbody").load("inc/index_table.php");

/* row deletion */
$("#sort tbody").on("click", ".deletelink", function(){
   //...rest of code the same
});

on()jQuery 1.7 で追加されました。以前のバージョンを使用しているが、1.4.2 以降を使用している場合は、代わりにdelegate()を使用できます。

$("#sort tbody").load("inc/index_table.php");

$("#sort tbody").delegate(".deletelink", "click", function(){
   //...rest of code the same
});

#sortor tbodyof$("#sort tbody")も動的である場合は$("document").on("click", "#sort tbody .deletelink", function(){...})、同様に機能しますが、より近いものdocumentはもちろんオフです。

編集
私はあなたのコードをもう一度見ていますが、デリゲートバインディングは機能するはずですが、load()の成功コールバックを使用すると、既存のコードでも機能するはずです。

ロードが正常に完了した場合、コールバックが実行されます。私は 100% 確実ではありませんが、成功が呼び出されたときに、要素が既に DOM に読み込まれているため、通常のバインディングが機能するはずであると想定しています。

それが機能しない場合は、上記の動的バインディングを使用する必要があります。

$("#sort tbody").load("inc/index_table.php", function(){
    /* row deletion */
    $(".deletelink").click(function(){
        // .. your code as before.
    });
});
于 2012-09-27T20:22:44.400 に答える
2

.load()テーブルが完全にロードされていることを確認するには、 likeのコールバックでクリック関数を宣言してみてください。

      $("#sort tbody").load("inc/index_table.php", function() {

      /* row deletion */
    $(".deletelink").click(function(){ ....
     });
   });
于 2012-09-27T20:34:04.567 に答える
0

.on()を使用して、イベントを要素にバインドしてみてください

$(".deletelink").on('click',function(e){

    e.preventDefault();

また、リンクのデフォルトの機能を停止するために preventDefault を追加してください。

于 2012-09-27T20:24:06.197 に答える
0

問題は、テーブルが読み込まれた後に削除リンクが表示されることです。そのため、ページが読み込まれて DOM ツリーが構築されたとき、そこにはありませんでした。したがって、a を添付することはできませんclick。試すことができlive()ます。これは次のように使用できます。

$(".deletelink").live('click',function(){
    // ajax call handling code here
});

この関数は、要素が DOM に導入された後にイベントを添付します。ただし、この関数は、DOM の変更時に DOM ツリー全体をスキャンし続けるため、少し貪欲です。したがって、注意して使用してください

于 2012-09-27T20:26:33.757 に答える