Question

我对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>的任何条目。此外，当我想看到我的页面的源代码时，它不会显示我的表格，但仍然是我的表格，即使它仍然经过验证。

有人可以解释一下我在这里做错了吗？

Answer 1

根据您使用的jQuery版本，您需要使用jQuery.delegate或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());
});

Answer 2

$("#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/

Answer 3

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

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

$.post('ajax/test.html', function(data) {
  $('.result').html(data);
  // Add .click code here
});

Answer 4

您需要在呈现元素后绑定click事件处理程序，因为在您进行绑定时它们不存在。

通过Javascript可点击呈现

4 个答案: