Function doesn't run

Question

I am using the above function to add paragraphs(it works fine). I want to use this event to remove something onclick, but it doesn't run at all. Thank you!

function add() {
  text = $('.textfield').val();
  $('.list').append('<p class="target">' + text + '</p>');
  $('.textfield').val('');
}

$('.target').click(function(){
        $(this).remove();
});

Please provide a working minimal working example which replicates the issue. — Mathias W, Oct 25 '17 at 17:01
It's probably the classic "use event delegation if the element doesn't exist when the event handler is assigned" bug. [Read More](https://learn.jquery.com/events/event-delegation/) — James, Oct 25 '17 at 17:04

score 0 · Answer 1 · answered Oct 25 '17 at 17:03

0

Put the click assignment inside the add function:

function add() {
  text = $('.textfield').val();
  $('.list').append('<p class="target">' + text + '</p>');
  $('.textfield').val('');
  $('.target').click(function(){
        $(this).remove();
  });
}

answered Oct 25 '17 at 17:03

Lukilas

176
1
6

thank you so much! if i may ask, why was mine not working? – Deaconu Serban Oct 25 '17 at 17:06
@DeaconuSerban because you tried to bind an event to an element which was not created yet. – Dmitry Oct 25 '17 at 17:10

score 0 · Answer 2 · answered Oct 25 '17 at 17:06

Since you are registering a click event in Jquery, make sure you add the event inside

$( document ).ready(function() { ... // Event goes here... });

$( document ).ready(function() {
    $('.target').click(function(){
        $(this).remove();
     });
});

Snowmonkey · Answer 3 · 2017-10-25T17:15:04.267

You got bit by the dynamically added element bug. When you create elements in this way, they are not going to inherit your listener. Instead, add the listener at the document level, but use the selector within the on("click", < selector >, < function >) -- this way, the document itself listens, and doesn't care how the selected element was created.

I've added two elements with that class to the .list div, and they will be handled exactly the same way as any elements added later. By adding the listener at the containing element, we avoid the dynamic element problems. Which, in a way, makes sense -- you can't listen for events on elements that don't exist, and if you create them after the listeners have been attached, the new elements don't have any way to know about their intended listeners.

Note that the listener doesn't have to be attached to the document, you can just as easily (as I have) attach it to the .list div that will contain those dynamic elements.

Read more about this, here.

$(".addText").on("click", add);

function add() {
  text = $('.textfield').val();
  $('.list').append('<p class="target">' + text + '</p>');
  $('.textfield').val('');
}

$(".list").on("click", '.target', function() {
  $(this).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="textfield">
<button class="addText">Add</button>
<div class="list">
<p class="target">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>

<p class="target">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p></div>

Function doesn't run

3 Answers3