1

我对 web 开发和 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 版本，您需要使用jQuery.delegate或绑定 click 事件jQuery.on，以便使用动态添加的 DOM 元素。

编辑：正如 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 回答
0

如果动态插入数据，则需要在插入数据后添加点击事件。

http://codepen.io/thomassnielsen/pen/FEKDg

$.post('ajax/test.html', function(data) {
  $('.result').html(data);
  // Add .click code here
});
于 2012-10-02T09:40:48.333 回答
0

您需要在渲染元素后绑定 click 事件处理程序，因为在您进行绑定时它们还没有到位。

于 2012-10-02T09:42:11.953 回答