使用 jQuery 定位动态添加的元素答案

【问题标题】：Target dynamically added element using jQuery使用 jQuery 定位动态添加的元素
【发布时间】：2018-06-11 13:05:41
【问题描述】：

我知道如何在 jQuery 上使用 eventet 委托。要监听动态添加的元素，我必须使用以下内容..

$('body .some-class').on('click', '.dynamically_added_ele', function(){});

我很理解。来到实际问题。假设我有一个按钮和 DOM 元素，我想动态添加到文档中。

<button class="my-button">Click Me</button>
var newDom = '<p class="new-dom">Hello there I am new content</p>';

现在我在按钮上绑定点击事件来创建新元素

var allow = true;
$('.my-button').on('click', function(){
    var newDom = '<p class="new-dom">Hello there I am new content</p>';
    if( allow ) {
       $(this).after($(newDom));
    } else {
        $(newDom).remove(); // Not removing the new added element. Can't target that newly added element
    }
    allow = false;
});

变量 allow 将检查为 true 然后 jQuery 将创建该元素，最后一个 allow 变量将是 false。当再次使用单击该按钮时，允许将是false，那时 jQuery 应该删除新添加的元素。但在这里我面临着问题。我无法像上面编码的那样删除新添加的元素。

我现在能做什么？

【问题讨论】：

您试图在将其放入 DOM 之前将其删除，这是您的错误。为什么不使用类选择器来删除所有“new-dom”类元素 $(".new-dom").remove();
@tanaydin 我知道了，问题解决了。

标签： javascript jquery event-handling dynamically-generated event-delegation

【解决方案1】：

我必须像这样使用类选择器

var allow = true;
$('.my-button').on('click', function(){
    var newDom = '<p class="new-dom">Hello there I am new content</p>';
    if( allow ) {
        $(this).after($(newDom));
        allow = false;
    } else {
       $('.new-dom').remove();
       allow = true;
    }
 });

【讨论】：

【解决方案2】：

可能是这样的：

var allow = true;
var newDom = $('<p class="new-dom">Hello there I am new content</p>');

$('.my-button').on('click', function(){
    if( allow ) {
       $(this).after(newDom);
       allow = false;
    } else {
        newDom.remove();
        allow = true;
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<button class="my-button">Click Me</button>

【讨论】：