Question

我有一个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'，但它会在第一个jQuery函数中列出ajax调用并加载包含结果的下一页

e.preventDefault()如何按预期工作？

Answer 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');
                }
            });
        }
    });
});

Answer 2

我相信你所追求的事实上是e.stopPropagation()，这将阻止事件冒泡到其父母。

编辑：就像Adam指出的那样，因为你正在使用on()并且实际将事件附加到body元素而不是按钮，一旦你的代码触发，事件就会已经冒出#playlist元素。< / p>

我相信你需要做的是检查你的#playlist点击处理程序，如果目标（event.target）是按钮（或者更确切地说，不是 #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
    }
});

Jquery：e.preventDefault无效？

2 个答案: