Целевой динамически добавленный элемент с использованием jQuery

Question

Я знаю, как использовать Evenet Delegation в jQuery.Чтобы прослушать даже динамически добавленный элемент, я должен использовать следующее ..

$('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 должен удалить только что добавленный элемент.Но здесь я сталкиваюсь с проблемами.Я не могу удалить этот недавно добавленный элемент, как то, что я кодировал выше.

Что мне теперь делать?

Answer 1

Может быть так:

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>

Answer 2

Я должен использовать селектор классов, как это

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