Jquery events not working with elements from append()

Question

Currently, I am creating something that will simply allow me to create tasks, click them when they are done and swipe left to get rid of them. The problem I am having is that when the new tasks are appended, they are not affected by any of the JQuery events on in the script.

Tl;dr: appended divs are not affected by the below javascript, how can I fix this issue?

<div class="app">

  <div class="appHeader">
    <h2>Tasks</h2>

    <form class="createTask">
      <input type="text" class="createTaskInput" size="10" maxlength="25" placeholder="Type here to create your task..." //>
    </form>

  </div>

  <div class="task">
    <div class="summary">This is an example task
      <br>When you complete a task, click the red button
      <br>Should you want to remove a task, swipe left on the task.
    </div>
    <div class="completion"></div>
  </div>
</div>


<script>
  $(".completion").on({
    'touchstart': function() {
      $(this).addClass("completed")
    }
  });

  $(document).ready(function() {
    $("div.task").on("swipeleft", swipeleftHandler);

    function swipeleftHandler(event) {
      $(event.target).addClass("swipeleft");
    }
  });

  $(document).ready(function() {
    $(".createTask").submit(function(e) {
      var value = $(".createTaskInput").val();

      $('.app').append('<div class="task"><div class="summary">' +
        value + '</div><div class="completion"></div></div>')
      e.preventDefault();
    });
  });
</script>

XerXeX · Accepted Answer · 2017-12-02T21:20:47.893

1

That is because you add the event listener before you add the objects. A workaround is to add the event listener to the body like this.

$( "body" ).on( "swipeleft", "div.task", swipeleftHandler );

and

$(" body ").on( "touchstart", ".completion", function(){
  $(this).addClass("completed")
});

edited Dec 02 '17 at 21:20

answered Dec 02 '17 at 21:06

XerXeX

784
4
16

Hello. This fixes one of the two functions, however the function that adds the completed class to the tasks does not work still. – Csarg Dec 02 '17 at 21:09
With part of the code is that? – XerXeX Dec 02 '17 at 21:16
see the new edit – XerXeX Dec 02 '17 at 21:21

Muhammad Omer Aslam · Answer 2 · 2017-12-02T21:58:58.243

Because you are not binding them after you add a new task see below

function swipeleftHandler(event) {
  $(event.target).addClass("swipeleft");
}

function touchHandler(event) {
  $(event.target).addClass("completed");
}

$(document).ready(function() {

  $(".completion").on('touchstart', touchHandler);
  $("div.task").on("swipeleft", swipeleftHandler);

  $(".createTask").submit(function(e) {

    var value = $(".createTaskInput").val();
    var totalExisting = $('div.task').length;

    $('.app').append('<div class="task"><div class="summary">' + value + '</div><div class="completion"></div></div>');

    var newTask = $('div.task').eq(totalExisting);
    newTask
      .on("swipeleft", swipeleftHandler)
      .on('touchstart', touchHandler);
    e.preventDefault();
  });
});

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

  <div class="appHeader">
    <h2>Tasks</h2>

    <form class="createTask">
      <input type="text" class="createTaskInput" size="10" maxlength="25" placeholder="Type here to create your task..." //>
    </form>

  </div>

  <div class="task">
    <div class="summary">This is an example task
      <br>When you complete a task, click the red button
      <br>Should you want to remove a task, swipe left on the task.
    </div>
    <div class="completion"></div>
  </div>
</div>

Jquery events not working with elements from append()

2 Answers2