在使用jQuery单击按钮后动态创建后选择“this”元素答案

【问题标题】：Select "this" element after dynamic created on button-click with jQuery在使用jQuery单击按钮后动态创建后选择“this”元素
【发布时间】：2014-06-10 03:28:26
【问题描述】：

我正在尝试让按钮单击事件在屏幕上创建一堆框。我需要每个框（div）在其中创建另一个 div，然后能够调用该 div，特别是进行样式设置。

现在，我为每个类分配了类，但我如何使用$(this) 来仅按类获取新创建的（最后一个）div，而不是选择页面上的每个元素?

我遇到了问题，尤其是 child 和 this 命令。

HTML：

<body>
  <button id="add-product">Add Product</button>
  <section class="products">
    <div class="outer">
      <div class="inner"></div>
    </div>
  </section>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</body>

查询：

$('#add-product').on('click', function() {
  // Call addProduct() function
  addProduct();
});

// Add-Product Function
var addProduct = function() {
  $('.products').append("<div></div>").children().addClass('image');

  var lastdiv = $('.image').last();
  $(lastdiv).append("<div></div>");

  var innerdiv = $(lastdiv).children();  
  $(innerdiv).addClass('overlay');
};

【问题讨论】：

在我看来您正在添加空 div，因此它们没有孩子，这可能是您遇到麻烦的地方。
^^ 他说的$('<div></div>').children() 肯定不符合任何条件，没有孩子，所以你想在这里做什么？
@adeneo, @eriese append() 返回原始上下文，在本例中为$('.products')，然后children() 在$('.products') 上执行。
现在我不明白你的意思是什么。
我在你的代码中没有看到this。

标签： jquery this parent-child

【解决方案1】：

在添加之前将新创建的元素（在变量中）存储起来：

var addProduct = function() {
  var $newDiv = $("<div>");
  $('.products').append($newDiv).children().addClass('image');

  var $newInnerDiv = $("<div>");
  $newDiv.append($newInnerDiv);

  $newInnerDiv.addClass('overlay');
};

【讨论】：

【解决方案2】：

只需创建可以引用的适当元素

$('#add-product').on('click', function() {
    var div1 = $('<div />', {'class': 'image'}),
        div2 = $('<div />', {'class': 'overlay'});

    $('.products').append( div1.append( div2 ) );
});

所有这些附加和子类的废话完全没有必要将类添加到新创建的元素中

【讨论】：