Question

我有一个表，其内容是通过AJAX成功响应生成的。

HTML代码

<table class="table table-hover" id="table_content"></table>

AJAX代码

$.ajax({
        dataType: "json",
        type : "POST",
        url: "/configuration/",
        data : { 'selected_item' : selected_item_id },

        success : function(result){
                 var table_heading = "<tr>"
                 var table_content = ""
                 for (var heads in result[1]){
                     table_heading +="<th style='background-color:#f1f1f1;'>" + result[1][heads] + "</th>"
                 }

                 for (var region in result[0]){
                      table_content += "<tr>"
                      for (var details in result[0][region]){
                          table_content += "<td>" + result[0][region][details] + "</td>"
                      }
                 }

                 table_content = table_heading + table_content

                 $("#table_content").html(table_content)
       },
});

我想对它应用onclick功能。像这样： -

点击功能代码

$(function(){
    $('#table_content tr').click(function () {
        $('.test').slideUp(0)
        $(this).append(($('.test')).slideDown('slow'));
    });
});

我面临的问题是，如果我通过AJAX响应生成内容，则无法单击该行。如果我在HTML本身内部创建一个表，它就可以工作，但是当表是通过AJAX响应创建的时候不行。

有什么问题？请建议。

EDITED

我想要实现的是在单击行时div应该在行的下方向下滑动。当数据通过AJAX生成时，我第一次工作。但是当我第一次生成数据后它不起作用，虽然事件被触发但$('.test').slideUp(0) $(this).append(($('.test')).slideDown('slow'));在第一次之后不起作用。也不会弹出任何错误。见http://jsfiddle.net/fVz6D/5/

Answer 1

使用click绑定事件的方式仅将事件绑定到执行绑定代码时DOM中存在的元素。您需要使用on()对动态生成的html元素进行绑定事件的事件委派。

$(function(){
    $('#table_content').on('click', 'tr', function () {
        $('.test').slideUp(0)
        $(this).append(($('.test')).slideDown('slow'));
    });
});

委派活动

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序reference。

Answer 2

<强>更新：查看工作演示： http://jsfiddle.net/c5FgG/1/

您的问题是您将测试div元素附加到表格行，该表格在重新填充表格后消失了。而是在更改表内容时克隆每次单击时的测试div，并使用克隆而不是原始。

旧答案：在ajax成功函数中添加onclick函数代码。这对我有用：

...
$("#table_content").html(table_content);

$('#table_content tr').click(function () {
  alert("Clicked");
  //your code
});
...

不要忘记用以下方法关闭表格行：

table_content += "</tr>";

Answer 3

尝试

$(function(){
    $('#table_content').on('click', 'tr', function () {
        $('.test').slideUp(0)
        $(this).append(($('.test')).slideDown('slow'));
    });
});

on()处理程序也应该适用于新创建的元素。

Answer 4

将on()用于动态添加的元素，例如

$('#table_content').on('click',' tr', function () {
    $('.test').slideUp(0)
    $(this).append(($('.test')).slideDown('slow'));
});

已更新您的div将移至tr clicked，click list generate new content table div.test在HTML中{1}}，desc div将从div.desc中删除，这就是为什么你没有再次获得clicking of list。

要解决此问题，您必须在if(!$('body > div.test').length){ $("body").append('<div class="test">You slide down a row with content xyz</div>'); }中再次添加$('#list').on('click', 'li', function () { var id = this.id; var table_content = ""; // IF id=1,2,3,4,5 Code $("#table_content").html(table_content); // add below code foe div.desc if (!$('body > div.test').length) { $("body").append('<div class="test">You slide down a row with content xyz</div>'); } });，

$(function () {
    $('#table_content').on('click', 'tr', function () {
        $clone=$('.test:not(.new-test)').clone();// clone the first test class element
        $('.new-test').remove();// remove the cloned elements
        $clone.addClass('new-test').appendTo('body');// add the clone to body
        $clone.slideUp(0);// playing with clone now
        $(this).append($clone.slideDown('slow'));
    });
});

完整代码

{{1}}

Demo

或者，您可以使用clone()之类的，

{{1}}

Working demo

Answer 5

$(function(){
    $('#table_content').on('click', 'tr', function () {
        $('.test').slideUp(0)
        $(this).append(($('.test')).slideDown('slow'));
    });
});

这是一个小提琴列表：

您可以根据自己的要求使用它。

表onclick行jQuery

5 个答案: