1

私は webdevelopment と AJAX にかなり慣れていないので、小さな問題に直面しています。基本的に、私は自分のウェブページにフォームを持っています。このフォームを送信すると、コントローラーに対して AJAX 呼び出しが行われ、必要なデータが返され、ページの html コンテンツが変更されます。

JS コード:

$(document).ready(function() {

    $("#mydiv table tbody td").click(function() {
        alert("You clicked my <td>!" + $(this).html() + 
              "My TR is:" + $(this).parent("tr").html());
    });



    $('#myform').submit(function()
    {
        try {
            var host = $("#host").val();
            var port = $("#port").val();
            var username = $("#username").val();
            var password = $("#password").val();
            var database = $("#database").val();

            $.ajax({
                type: "POST",
                url: "/management/connectDatabase",
                dataType: "JSON",
                data: "host="+host+"&port="+port+"&username="+username+"&password="+password+"&database="+database,
                cache: false,
                success: 
                    function(data){
                        $('#mydiv').html(show_tables(data));
                    },
            });
            return false;
        }

        catch(e){
            console.debug(e);
        }
    });
});

function show_tables(data)
{
    var html = '<div id="mydiv">';

    html += '<table class="display" id="example">';
    html += '<thead><tr><th>Tables</th></tr></thead><tbody>';
    for (var tablesCount = 0; tablesCount < data.tables.length; tablesCount++){
        html += '<tr class=gradeA id="trtest">';
        html += '<td id="tdtest">' + data.tables[tablesCount] + '</td>';
        html += '</tr>';
    }
    html += '</tbody></table>';

    html += '</div>';
    return html;
}

フォームを送信すると、HTML が正しく生成され、コンテンツが表示されます。しかし、のエントリをクリックできません<table>。さらに、自分のページのソースコードを表示したい場合、テーブルは表示されませんが、検証済みであってもフォームが表示されます。

誰かが私がここで間違っていることを説明してもらえますか?

4

4 に答える 4

2

使用している jQuery のバージョンに応じて、動的に追加された DOM 要素を操作するために、jQuery.delegateまたはを使用してクリック イベントをバインドする必要があります。jQuery.on

編集: Geert Jaminon が指摘したようselectorに、関数のパラメーターを使用する必要がありonます。これは私にとってはうまくいきます。

$("#mydiv table tbody").on('click', 'td', function() {
    alert("You clicked my <td>!" + $(this).html() + 
          "My TR is:" + $(this).parent("tr").html());
});
于 2012-10-02T09:37:12.277 に答える
1 
$("#mydiv table tbody").on('click', 'td', function() {
    alert("You clicked my <td>!" + $(this).html() + "My TR is:" + $(this).parent("tr").html());
});

.live() は、新しい jQuery バージョンでは .on() に置き換えられています。

http://jsfiddle.net/ZqYgv/

于 2012-10-02T09:55:14.067 に答える