div 标签没有使用 append 方法附加到另一个 div 标签

Question

谁能告诉我为什么div 和button id 没有被附加到下面代码中clickable 类的div 中。

var $el = $("<div/>", {class: "clickable",style: "margin:100px 10px 20px 20px ",}).append($("<div />", { id: "button"})).on('click', handleClick);

当我执行以下操作时，我在控制台日志中没有看到任何内容：

console.log("Element el test");
  console.log($el);

我想将div 和id = button 附加到div 和clickable 类，这样我就可以使用这个$("#button").jqxButton({ value: 'Export Grid '}); 在每个表格/网格下方显示一个按钮 但是由于某种原因，它没有出现在上面提到的控制台日志语句中。

其次，一旦按钮开始显示在网格/表格下方，我将为其附加一个事件。基本上，我会做这样的事情：

 $("#button" ).on('click', function () {
       $(".clickable").jqxGrid('exportdata', 'pdf', 'jqxGrid');
  });

所以，我不确定下面的附加方法是否好，因为已经附加了一个 onclick 事件。所以，我想象即使下面的方法开始工作，点击div button id 会做与单击包含clickable 类的div 时相同的事情吗？

 var $el = $("<div/>", {class: "clickable",style: "margin:100px 10px 20px 20px ",}).append($("<div />", { id: "button"})).on('click', handleClick);

var source = {
  localdata: [
    ["https://www.samplelink.com", "Maria Anders", "Sales Representative", "Obere Str. 57", "Berlin", "Germany"],
    ["https://www.samplelink.com", "Ana Trujillo", "Owner", "Avda. de la Constitucin 2222", "Mxico D.F.", "Mexico"],
    ["https://www.samplelink.com", "Antonio Moreno", "Owner", "Mataderos 2312", "Mxico D.F.", "Mexico"],
    ["https://www.samplelink.com", "Thomas Hardy", "Sales Representative", "120 Hanover Sq.", "London", "UK"],
    ["https://www.samplelink.com", "Christina Berglund", "Order Administrator", "Berguvsvgen 8", "Lule", "Sweden"],
    ["https://www.samplelink.com", "Hanna Moos", "Sales Representative", "Forsterstr. 57", "Mannheim", "Germany"],
    ["https://www.samplelink.com", "Roland Mendel", "Sales Manager", "Kirchgasse 6", "Graz", "Austria"]
  ],
  datafields: [{
      name: 'link',
      type: 'string',
      map: '0'
    },
    {
      name: 'ContactName',
      type: 'string',
      map: '1'
    },
    {
      name: 'Title',
      type: 'string',
      map: '2'
    },
    {
      name: 'Address',
      type: 'string',
      map: '3'
    },
    {
      name: 'City',
      type: 'string',
      map: '4'
    },
    {
      name: 'Country',
      type: 'string',
      map: '5'
    }
  ],
  datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);


$(".clickable").jqxGrid({
  width: 800,
  height: 270,
  source: dataAdapter,
  columnsresize: true,
  sortable: true,
  columns: [{
      text: 'Link',
      datafield: 'link',
      width: 200
    },
    {
      text: 'Contact Name',
      datafield: 'ContactName',
      width: 150
    },
    {
      text: 'Contact Title',
      datafield: 'Title',
      width: 100
    },
    {
      text: 'Address',
      datafield: 'Address',
      width: 100
    },
    {
      text: 'City',
      datafield: 'City',
      width: 100
    },
    {
      text: 'Country',
      datafield: 'Country'
    }
  ]
});

$(".clickable").on("rowselect", handleClick);

function handleClick(e) {
  var $el = $("<div/>", {
    class: "clickable",
    style: "margin:100px 10px 20px 20px ",
  }).append($("<div />", {
    id: "button"
  })).on('click', handleClick);

  console.log("Element el test");
  console.log($el);

  /*var buttonDiv = $("<div />", {
    id: "button"
  });
  console.log("Testing button Div");
  console.log(buttonDiv);

  $("#button").jqxButton({
    value: 'Export Grid '
  });*/

  $el.jqxGrid({
    height: 270,
    source: dataAdapter,
    columns: [{
        text: 'Link',
        datafield: 'link',
        width: 200
      },
      {
        text: 'Contact Name',
        datafield: 'ContactName',
        width: 150
      },
      {
        text: 'Contact Title',
        datafield: 'Title',
        width: 100
      },
      {
        text: 'Address',
        datafield: 'Address',
        width: 100
      },
      {
        text: 'City',
        datafield: 'City',
        width: 100
      },
      {
        text: 'Country',
        datafield: 'Country'
      }
    ]
  });

  var $this = $(this),
    $parent = $(this).parent();

  if (e.type == 'rowselect') {
    $('.clickable').slice(1).remove();
  }
  $parent.append($el);
}

.test {
  margin: 100px 10px 20px 20px;
}

<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div class="wrapper">
  <div class="clickable" style="margin:100px 10px 20px 20px;"></div>
</div>

Answer 1

您的$el 被分配给您上次调用.on 的返回值。

你可能想做更多这样的事情

var $el = $("<div/>", {class: "clickable",style: "margin:100px 10px 20px 20px ",});
var $nested = $("<div />", { id: "button"});

$el.append($nested);
$nested.on('click', handleClick);