Question

在我的实际案例中，我的表格中有四个<table>个对象位于<div>内，style="display: none"就像这样＆＃34;

<div id="person-info-table" style="display: none">
    <hr />
    <div>Personal info</div>
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="personInfoGrid">
    //..


<div id="associates-table" style="display: none">
    <div>Associates info</div>
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="associatesGrid">
    //..

等等。

在某些情况下，我想加载此表格并显示我为每个表格分别Ajax调用所做的内容：

 success: function (data) {
              if (data > 0) {
                  $("#person-info-table").show();
                  $('#personInfoGrid').MydataTable();
              }
          }

我在这里使用自己jquery DataTable的扩展名，但我认为这对我遇到的问题没有任何影响。对于每个新的DataTable，我都会添加一个自定义Clear filters按钮，如下所示：

$('.dataTables_length').append("<button class='btnClearFilter' onclick='..'>Clear</button>");

$($(this.selector).find(".dataTables_length")).append(--My HTML--);

在控制台中没有产生错误，但我也没有在任何一张桌子上呈现任何内容。我尝试了各种方法尝试将所需的HTML仅添加到我正在使用的当前元素中，因为在我看来这是问题（蚂蚁解决方案）但我不能找到成功的方法。

Answer 1

正如您在示例中所示，您正在使用：

$('#parent').append('<div class="active"></div>');
$('div.active').append('<button>New Button</button>');

您将所有元素div元素追加到活动类，因此当您向DOM添加更多元素时，JQuery会在更多元素上执行您的函数。

使用类似的东西：

var table = $('#person-info-table').find('table');

initialise($table);

function initialise($table){

$(table).find('.dataTables_length').append("<button class='btnClearFilter' ...

}

如何仅将HTML附加到类选择的当前元素

1 个答案: