Не работает Js в добавленном блоке append [дубликат]

$(document).ready(function() { 
  $("#add").click(function() { 
    var newElems = $('<div></div>') 
      .append('Новый блок') 
      .append('<a class="del" href="#">Удалить</a>'); 
 
    $('#wrap').append(newElems); 
    $(".del").click(function() { 
      var pdiv = $(this).parent('div'); 
      pdiv.fadeOut(100); 
      return false 
    }); 
    return false 
  }); 
  $(".del").click(function() { 
    var pdiv = $(this).parent('div'); 
    pdiv.fadeOut(100); 
    return false 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="wrap"> 
  <div>Блок 1<a class="del" href=\ "#\">Удалить</a></div> 
  <div>Блок 2<a class="del" href=\ "#\">Удалить</a></div> 
</div> 
<a id="add" href="#">Добавить</a></div>

Вы вешаете слушатель события на определенный элементы страницы. Вы делаете это один раз с теми элементами, которые в тот момент находятся на странице. На новых объектах, разумеется, событие никак не отслеживается. Нужно добавлять функцию к каждому новому элементу после его появления или, что более правильно, прикреплять слушателя к любому родительскому элементу и указывать, на каких из его детей распространяется действие. Подробно про этот механизм вы можете прочитать, например, здесь: https://learn.javascript.ru/event-delegation

В вашем случае, нужно вешать слушатель события примерно таким образом, тогда он будет распространяться на все .del внутри страницы, независимо от того, когда они появляются или исчезают:

$(document).on('click', '.del', function() {
});

Еще лучше, вместо $(document) указать максимально близкого к нужным элементам родителя, тогда это будет гораздо более эффективная конструкция. В вашем случае, это может быть, например $("#wrap").

$('body').on('click', '.del', function(){ 
})