fadeOut使用jquery动态加载div

Question

Im writing a small app, and im having problems deleting (as in fading out) a dynamically loaded div using jquery.

The problem only presents itself when i add a new content box, if i reload the page and the content box gets rendered not dynamically but normally (as in from the database query), it deletes just fine(as in fade out), but when the div is added anew, i cant get it out.

$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'
        )));

thats the code that creates the div dynamically.

yet when I click delete, nothing happens.

here comes the code that handles the post request through 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');
    });
});

I have been reading a lot, without much luck! also first my code looked a bit differently, it didnt had the

.on('click', function() { 

but rather was

.click(function() {

Thanks in advance for your input!

Answer 1

@PSL is correct. A common problem with adding event handlers using jQuery is that the element does not exist on the page when the JS is run, which means that the event handler was not bound to that element, and nothing happens.

If you change the line

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

to

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

then you shouldn't have any trouble.

The second argument being passed into the on() method acts as a filter to the original selector that you bind your event handler to. To explain the example I provided in plain english, you are telling the browser to listen for clicks everywhere on the page, and check if what was clicked happens to be an <a> element with a class of delete-mix. If you did happen to click on a.delete-mix, then the callback function will run. If you didn't, then nothing will happen.

This is not exactly the best solution. Adding a global click handler to the document can cause problems. A better solution would be to replace document with something more specific, such as a container element that is wrapping the dynamic boxes you are adding. Without more code from you I'm not entirely sure what that selector should be.

For more information, you should read the jQuery documentation about the on() method.

Hope this helps.