0

我有一个HTML片段

  <div class="playlist" id='{{ playlist.name }}'>
         {{ playlist.name }} 
        <button class="btn btn-primary queueAll" href="#">queue all</button> 
        <i class="icon-chevron-right icon-large"></i>
   </div>

和相应jQuery的功能为

$(function(){
    $('#playlist').click(function(){
        $.ajax({
            url: '/getUserPlaylists',
            success: function(response, textStatus, jqXHR){
                // console.log(response);
                $('#feature').empty().append(response);
            },
            error: function(response, textStatus, jqXHR) {
                bootstrap_alert.error('error in receving playlists');
            }
        });
    });
});

我想要的是

  • 当用户单击queue all按钮时，alert应该弹出并且没有任何反应

我的jQuery功能是 

$(function(){
    $('body').on('click', '.queueAll', function(e) {
        e.preventDefault();
        alert('will queue all videos');
    });
});

现在发生了什么事？

我确实这样做了，alert 'will queue all videos'但它随后会按照第一个函数中列出的方式进行 ajax 调用，jQuery并加载带有结果的下一页

怎么e.preventDefault()没有按预期工作？

4

2 回答 2

1

首先，您的按钮不应该有 href 属性，其次 preventDefault 会阻止元素的默认操作。它将阻止链接重定向到 href 中的 url 或阻止提交表单等。它不会阻止附加 javascript 的事件处理程序，因为您必须取消绑定处理程序。

您还针对具有 ID 的元素playlist，但它似乎是一个类，除非 playlist.name 只是playlist?

除非它是动态的，否则可能是这样的：

$(function(){
    $('.queueAll').on('click', function(e) {
        alert('will queue all videos');
        return false;
    });
});

或者 ：

$(function(){
    $('#playlist').click(function(e){
        if (e.target.tagName !== 'BUTTON') { //make sure it's not the button
            $.ajax({
                url: '/getUserPlaylists',
                success: function(response, textStatus, jqXHR){
                    // console.log(response);
                    $('#feature').empty().append(response);
                },
                error: function(response, textStatus, jqXHR) {
                    bootstrap_alert.error('error in receving playlists');
                }
            });
        }
    });
});
于 2012-08-16T23:32:02.970 回答
0

我相信你所追求的实际上e.stopPropagation()是它将阻止事件冒泡到它的父级。

编辑：就像亚当指出的那样，因为您正在使用on()并将事件实际附加到 body 元素而不是按钮，一旦您的代码触发，该事件将已经冒泡通过 #playlist 元素。

如果目标（event.target）是按钮（或者更确切地说，不是#playlist元素），我相信你需要做的是检查你的#playlist点击处理程序：

$('#playlist').click(function(e){
    if ($(e.target).is('#playlist')) {
        // Do stuff here as it was the #playlist element that was clicked - NOT a child of it
    }
});
于 2012-08-16T23:30:27.070 回答