Question

我正在编写一个小应用程序，我在使用jquery删除（如淡出）动态加载的div时遇到问题。

当我添加一个新的内容框时，问题才出现，如果我重新加载页面并且内容框不是动态呈现而是正常呈现（如在数据库查询中），则删除就好了（如淡出时），但是当重新添加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的代码。

但是当我点击删除时，没有任何反应。

这里是通过js处理post请求的代码。

$('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。

希望这有帮助。

fadeOut使用jquery动态加载div

1 个答案: