表格点击行jQuery

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 响应创建时则不行。

有什么问题？请建议。

已编辑

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

Answer 1

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

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

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

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

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

别忘了关闭表格行：

table_content += "</tr>";

Answer 2

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

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

委托活动

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

Answer 3

试试

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

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

Answer 4

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

这里是小提琴列表：

fiddle1

fiddle2

fiddle3

fiddle4

您可以根据需要使用它。

Answer 5

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

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

更新您的div 将移动到您的clicked 上的tr，因此当您在list 上click 时，它会在generate new content 中table 所以您的@987654334 @ 将从 HTML 中删除，这就是为什么您不再获得 desc div 的原因。

要解决此问题，您必须在clicking of list 中再次添加div.desc，

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>');
    }
});

Demo

或者，您可以使用clone() 喜欢，

$(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'));
    });
});

Working demo