fadeOut динамически загружаемый div с помощью jquery

Question

Im пишут небольшое приложение, а им возникают проблемы с удалением (как и при исчезновении) динамически загружаемого div с использованием jquery.

Проблема возникает только в том случае, если я добавляю новый контент, если я перезагружаю страницу, а поле содержимого отображается не динамически, а обычно (как в запросе базы данных), оно удаляет только штраф (как при постепенном исчезновении), но когда div добавляется заново, я не могу его вытащить.

$result = '<div class="my-music-item">'. $app['twig']->render('soundcloud-player.twig', array(
      'url'=>$mix->getUrl(), 
      'player_type'=>'artwork', 
      'url'=>$mix->getUrl(), 
      'color'=>'ff0948', 
      'height'=>'200', 
      'width'=>'200' 
     )) . '<p class="delete-mix-wrapper"><a class="delete-mix" data-mix-id="'.$mix->getId().'" data-post-to="'.$app['url_generator']->generate('delete-mix-post').'" href="javascript:;">Delete</a></p>' . '</div>'; 

     return new Response(json_encode(array(
      'html'=>$result, 
      'status'=>'true' 
     ))); 

это код, который динамически создает div.

все же, когда я нажимаю delete, ничего не происходит.

Приходит код, обрабатывающий запрос почты через js.

$('a.delete-mix').on('click', function() { 
    var parent = $(this).closest('div.my-music-item'); 
    $.post($(this).attr('data-post-to'), { mix_id: $(this).attr('data-mix-id') }) 
    .done(function(data) { 
     parent.css('background-color', 'pink'); 
     parent.fadeOut('fast'); 
    }); 
}); 

Я читал много, без большой удачи! также первый мой код выглядел немного по-другому, оно не было

.on('click', function() { 

а скорее

.click(function() { 

Заранее спасибо за Ваш вклад!

Answer 1

@PSL является правильным. Общая проблема с добавлением обработчиков событий, использующих jQuery, заключается в том, что элемент не существует на странице при запуске JS, а это значит, что обработчик событий не привязан к этому элементу, и ничего не происходит.

Если вы измените строку

$('a.delete-mix').on('click', function() { ... }) 

в

$(document).on('click', 'a.delete-mix', function() { ... }) 

, то вы не должны иметь каких-либо проблем.

Второй аргумент, передаваемый в метод on(), действует как фильтр исходного селектора, к которому вы привязываете обработчик событий. Чтобы объяснить пример, который я предоставил на простом английском языке, вы говорите браузеру, чтобы он прослушивал клики всюду на странице и проверял, было ли то, что было нажато, является элементом <a> с классом delete-mix. Если вы случайно нажали на a.delete-mix, функция обратного вызова будет запущена. Если бы вы этого не сделали, ничего не случится.

Это не совсем лучшее решение. Добавление глобального обработчика кликов к document может вызвать проблемы. Лучшим решением было бы заменить document чем-то более конкретным, например, элементом контейнера, который обертывает добавляемые динамические поля. Без лишнего кода от вас я не совсем уверен, что должен делать этот селектор.

Для получения дополнительной информации, вы должны прочитать jQuery documentation about the on() method.

Надеюсь, это поможет.