0

動的テーブルを作成しようとしています。このテーブルでは、行がクリックされるとすぐに別のテーブルに詳細情報が表示されます。

これは、1年前に作成したjQueryライブメソッドを使用したコードに基づいて行っています。現在、このメソッドは存在せず、onメソッドに切り替えました。

ここで問題となるのは、このコードが実際にDatatableの作成をトリガーする一方で、行のクリックイベントをバインドしないことです。クリックしても何も起こりません。

これは責任のあるJavascriptコードです：

<script type="text/javascript">
$(document).ready(function() {
    $("#overview").dataTable({
        aoColumnDefs:[{
            sWidth: "20px",
            aTargets: [0]
        }],
        bLengthChange: false,
        oLanguage: {
            sProcessing:   "Bitte warten...",
            sLengthMenu:   "_MENU_ Einträge anzeigen",
            sZeroRecords:  "Keine Einträge vorhanden.",
            sInfo:         "_START_ bis _END_ von _TOTAL_ Einträgen",
            sInfoEmpty:    "0 bis 0 von 0 Einträgen",
            sInfoFiltered: "(gefiltert von _MAX_  Einträgen)",
            sInfoPostFix:  "",
            sSearch:       "Suchen",
            oPaginate: {
                sFirst:    "Erster",
                sPrevious: "Zurück",
                sNext:     "Nächster",
                sLast:     "Letzter"
            }
        },
        iDisplayLength: 10,
        sAjaxSource: "<%=ivy.html.startref("API/WebAPI/antraege.ivp")%>?asUid=<%=ivy.html.get("in.asUid")%>"
    });

    $(".dataset").on("click", function() {
        antragid = this.id;

        $.ajax({
            url: "<%=ivy.html.startref("API/WebAPI/antrag.ivp")%>",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: {
                id: antragid
            },
            success: function(data) {
                for (var key in data) {
                    $('#'+key).html(data[key]);
                }
            }
        })
    })
})
</script>

これをテンプレートで動作するワークフローツールで使用しているため、このコードをヘッダーに入れることができません（そうしないと、このテンプレートを使用するすべてのページに読み込まれます）。それをbodyタグに入れてください。これがこの問題に影響を与える可能性があるかどうかはわかりません。

ここで、奇妙な部分があります。上記のコードをコピーしてChrome JSコンソールで実行すると、イベントバインディングが作成されるため、詳細が他のテーブルに配置されます。

私は何か間違ったことをしていますか？liveメソッドを使用するアプリケーションは引き続き問題なく動作します。

ありがとう

4

1 に答える 1

2

onイベントを最も近い静的な親要素に委任する必要があります...クリックすると動的に追加された要素で機能します

これを試して

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

#overviewドキュメントへの委任は機能しますが、クリックが呼び出されたときにドキュメントに存在する最も近い親（あなたの場合はそうだと思います）に委任できるとさらに便利です。

on（）委任イベントの詳細

于 2013-03-21T10:08:44.550 に答える