javascript - my done button somehow went to a blank page and delete won't work unless I refresh -ajax -

i playing around todo list learned online. trying add ajax it. works when try add item. when item added there's button says 'mark done' can click on , there 'delete' button used delete item list , database.

adding ajax works fine after adding, if click on 'mark done' button, page goes url of done-ajax.php?as=done&item=110 110 id of item in database. have go index page. , when go index page item marked done because 'mark done' worked somehow go url instead of staying in index page.

this 1 of problems found have no idea result.

another problem if add item , refresh page clicked 'mark done' wouldn't go url instead ajax works , 'delete' button show how delete button wouldn't work. have refresh page in order 'delete' button work ajax. checked attributes , looked around codes couldn't seem find causing problem.

my index codes below

<div class="list"> <h1 class="header">et's lists.</h1>  <?php if(!empty($items)): ?> <ul class="items">     <?php foreach($items $item): ?>     <li>                     <span class="item<?php echo $item['done'] ? ' done' : '' ?>">                         <?php echo $item['todotext']; ?>                     </span>         <?php if($item['done']): ?>         <a href="delete-ajax.php?as=delete&item=<?php echo $item['id']; ?>" class="delete-button">delete task</a>         <?php endif; ?>         <?php if(!$item['done']): ?>         <a href="done-ajax.php?as=done&item=<?php echo $item['id']; ?>" class="done-button">mark done</a>         <?php endif; ?>     </li>     <?php endforeach; ?> </ul> <?php else: ?> <p class="empty">you haven't added items yet.</p> <ul class="items"></ul> <?php endif ?>  <form class="item-add" action="add.php" method="post">     <input type="text" name="todotext" placeholder="type new item here." class="input" autocomplete="off" required>     <input type="submit" value="add" class="submit"> </form> </div> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/ajax.js"></script> 

my ajax.js file

$(document).ready(function() {  //action when submit clicked $(".submit").click(function(e){ var todotext = $("input[name='todotext']").val(); e.preventdefault();  //ajax adding todotext $.ajax({ method: "post", url: "add-ajax.php", data: {todotext: todotext}, datatype: "json" }) .done(function(data){ $('p.empty').empty(); $('input.input').val(''); $('ul.items').append('<li>'+todotext+' '+     '<a href="done-ajax.php?as=done&item=' + data.id +                 '" class="done-button">mark done</a></li>'); }) });  //action when done button clicked $(".done-button").click(function(e){ e.preventdefault();  //making sure work current element var $clicked = $(this);  //get href attribute value , parse item # item's id var attrvalue = $clicked.attr('href'); var parseattrvalue = attrvalue.split('&'); var parseitem = parseattrvalue[1].split('='); var item = parseitem[1];  //ajax mark done button $.ajax({ method: "get", data:{as: 'done', item: item}, url: "done-ajax.php" }) .done(function(){ $clicked.prev().addclass('done'); $clicked.removeclass('done-button').empty(); $clicked.addclass('delete-button').text('delete task'); $clicked.removeattr('href'); $clicked.attr('href','delete-ajax.php?as=delete&item='+item); }); });  //action when delete button clicked $(".delete-button").click(function(e){ e.preventdefault();  //making sure work current element var $clicked = $(this);  //get href attribute value , parse item # item's id var attrvalue = $clicked.attr('href'); var parseattrvalue = attrvalue.split('&'); var parseitem = parseattrvalue[1].split('='); var item = parseitem[1];  //ajax mark done button $.ajax({ method: "get", data:{as: 'delete', item: item}, url: "delete-ajax.php" }) .done(function(){ $clicked.closest('li').remove(); $clicked.remove(); }); }); });  done-ajax.php file   <?php  require_once 'app/init.php';  if (isset($_get['as'], $_get['item'])) {     $as = $_get['as'];     $item = $_get['item'];      switch ($as) {         case 'done':             $donequery = $db->prepare(" update phptodolist_items set done = 1 id = :item , user = :user "); break; } }   delete.php file  <?php  require_once 'app/init.php';  if (isset($_get['as'], $_get['item'])) {     $as = $_get['as'];     $item = $_get['item'];      switch ($as) {         case 'delete':              $donequery = $db->prepare(" delete phptodolist_items id = :item , user = :user "); break; } } 

(by way, few helped out ajax earlier) lot in advance :d

you binding event handlers when page opens / dom ready, on $(document).ready(). add new items using ajax links in these items not have event handlers bound them.

you can use event delegation make sure events automatically bound newly added items.

you can changing:

$(".delete-button").click(function(e){ e.preventdefault(); ... 

to like:

$(".list").on('click', '.delete-button', function(e){   e.preventdefault();   ... 

where $(".list") can element contains newly added elements , on page when code executes.

this applies event handlers want bind elements not yet on page when dom ready.