JQuery создает новый элемент, но не удаляет этот элемент после

У меня проблема с моим скриптом. Я хочу создать динамические объекты, если я нажму «Создать новый элемент», новый объект будет создан, но если я нажму на удаление, это не сработает. Зачем? Спасибо.JQuery создает новый элемент, но не удаляет этот элемент после

<!doctype html> 
 
    <html> 
 
    <meta charset="utf-8"> 
 
    <head> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    <script> 
 
\t $(document).ready(function() { 
 
\t 
 
\t \t // Create new Object inside of #content 
 
\t \t $("#wrapper > #taskbar > #create_new_element").click(function(){ 
 
\t \t \t $("#wrapper > #content").append('<div class="new_object"><p>New Object</p><a class="remove_object">Remove</a></div>'); 
 
\t \t }); 
 
\t 
 
\t \t // Remove an Object inside of #content 
 
\t \t $("#wrapper > #content > .new_object > .remove_object").click(function(){ 
 
\t \t \t $(this).closest('<div class="new_object"><p>New Object</p><a class="remove_object">Remove</a></div>').remove(); 
 
\t \t }); 
 
\t }); 
 

 
    </script> 
 
    </head> 
 
    <body> 
 
    <div id="wrapper"> 
 

 
\t 
 
\t \t <div id="taskbar"> 
 
\t \t \t <p id="create_new_element">Create new Element</p> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div id="content"></div> 
 

 

 

 
    </div> 
 
    </body>

источник

2017-01-19 user6834389

HTTP: // StackOverflow. com/questions/19129794/how-to-remove-an-element-that-add-dynamic-in-javascript –

'добавление eventlistener в динамических divs' посмотреть на SOs js top100 вопросов ... –

Возможный дубликат [Как удалить элемент, который динамически добавляется в javascript] (http://stackoverflow.com/questions/19129794/how- to-remove-an-element-that-is-added-dynamic-in-javascript) – ppasler

Вы должны использовать .on метод для элементов, созданных динамически.

$(document).on('click',"#wrapper > #content > .new_object > .remove_object",function(){ 
    $(this).closest('.new_object').remove(); 
});

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

Подробнее о event delegation.

источник

2017-01-19 19:14:27

Я пробовал это в jsfiddle, и он выдал мне ошибку 'Uncaught Error: Ошибка синтаксиса, нераспознанное выражение:

New Object

Remove

'. Я должен был нацелить класс '.new_object' внутри' .closest() 'для его работы: https://jsfiddle.net/cg4ouyrm/1/. Я думаю, что я должен делать что-то неправильно. +1 от меня все еще хотя =) –

Вы правы. Спасибо за ваш вопрос! –

Вы связать события с вновь созданными элементами после того, как они созданы

проверки следующего фрагмент

$(document).ready(function() { 
 

 
    // Create new Object inside of #content 
 
    $("#wrapper > #taskbar > #create_new_element").click(function() { 
 
    $("#wrapper > #content").append('<div class="new_object"><p>New Object</p><a class="remove_object">Remove</a></div>'); 
 
    bindRemoveEvent(); 
 
    }); 
 

 
    function bindRemoveEvent() { 
 
     $(".remove_object").on('click', function() { 
 
     // console.log(this); 
 
     $(this).closest('.new_object').remove(); 
 
     }); 
 
    } 
 
    // Remove an Object inside of #content 
 

 
});

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

 

 

 
<body> 
 
    <div id="wrapper"> 
 

 

 
    <div id="taskbar"> 
 
     <p id="create_new_element">Create new Element</p> 
 
    </div> 
 

 
    <div id="content"></div> 
 

 

 

 
    </div> 
 
</body>

Надеется, что это помогает

источник

2017-01-19 19:17:23 Geeky

JQuery создает новый элемент, но не удаляет этот элемент после

ответ

Смежные вопросы