时间戳

首页 > 解决方案 > 使用 jQuery 定位动态添加的元素

javascript - 使用 jQuery 定位动态添加的元素

问题描述

我知道如何在 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 应该删除新添加的元素。但在这里我面临着问题。我无法像上面编码的那样删除新添加的元素。

我现在能做什么？

标签： javascriptjqueryevent-handlingdynamically-generatedevent-delegation

解决方案

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

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

推荐阅读