0

我正在编写一个小应用程序，并且在使用 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() {

提前感谢您的意见！

4

1 回答 1

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 文档on()。

希望这可以帮助。

于 2013-09-24T20:18:12.917 回答