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

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

0 голосов
/ 11 июня 2018

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

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

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

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

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>
0 голосов
/ 11 июня 2018

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

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