jQuery preventDefault() 不能与.on() 一起使用

Question

是的，我已经阅读了许多其他有同样问题的帖子，但我不明白如何解决这个问题。 我创建了一个书签按钮，它需要在点击时更改图标。

我的 jQuery：

jQuery(document).ready( function() {
    
    var bm = jQuery(".user_bookmark");
    
    bm.on("click", ".user_bookmark", function (e) {
        e.preventDefault(); 
        post_id = jQuery(this).attr("data-post_id")
        nonce = jQuery(this).attr("data-nonce")

        jQuery.ajax({
         type : "post",
         dataType : "json",
         url : bookmarkAjax.ajaxurl,
         data : {action: "eri_user_bookmark", post_id : post_id, nonce: nonce},
         success: function(response) {
            if(response.type == "success") {
                var add = 'Add Bookmark';
                var remove = 'Remove Bookmark';
                var display = bm.attr('display');
                var bookmarked = bm.attr('bookmarked');
                if (display == 'icon') {
                    add = '<i class="x-icon" data-x-icon-o="&#xf02e;" aria-hidden="true"></i>';
                    remove = '<i class="x-icon" data-x-icon-s="&#xf02e;" aria-hidden="true"></i>';
                }
                if (bookmarked) {
                    bm.html(remove);
                    bm.attr('bookmarked', 'false');
                } else {
                    bm.html(add);
                    bm.attr('bookmarked', 'true');
                }
            }
            else {
               alert("Your bookmark could not be added")
            }
         }
        })  
    });

})

首先我有bm.click() ，但它只需单击一下，然后我阅读切换到.on() function，现在它正在刷新页面。

我尝试用function ()替换 function function (e)并替换e.preventDefault(); return false; , e.stopImmediatePropagation(); , 和e.stopPropagation(); .

还尝试使用所有这些变体将bm.on()与jQuery(document).on()切换。 那仍然运行我的代码并且没有刷新，但它没有更改 jQuery 代码中的元素。

示例 HTML：

<a class="user_bookmark" data-nonce="2b92b05de9" data-post_id="1" href="https://example.com/wp-admin/admin-ajax.php?action=eri_user_bookmark&amp;post_id=1&amp;nonce=2b92b05de9" display="icon" bookmarked="true" style="outline: none;">
   <i class="x-icon" data-x-icon-s="" aria-hidden="true"></i>
</a>

完整的 PHP 要点： https://gist.github.com/mrgandy/91361fca86e764928e7ec77

Answer 1

问题是因为您不小心嵌套了事件处理程序。 您将委托事件处理程序附加到.user_bookmark ，它正在侦听子.user_bookmark元素上的点击事件。 您的 HTML 显示这些元素没有嵌套，因此事件处理程序永远不会触发，因此不会preventDefault()或您的 AJAX 请求。

假设您尝试定位的<a />元素不是动态创建的，则删除您在on()调用中使用的第二个参数。

 jQuery($ => { var $bm = $('.user_bookmark'); $bm.on('click', function(e) { e.preventDefault(); let post_id = $(this).data('post_id'); let nonce = $(this).data('nonce'); console.log(post_id, nonce); console.log('ajax request here...'); }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="user_bookmark" data-nonce="2b92b05de9" data-post_id="1" href="https://example.com/wp-admin/admin-ajax.php?action=eri_user_bookmark&amp;post_id=1&amp;nonce=2b92b05de9" display="icon" bookmarked="true" style="outline: none;"> <i class="x-icon" data-x-icon-s="" aria-hidden="true"></i> Lorem ipsum </a>

如果元素实际上是在页面加载后动态添加到 DOM 中的，那么您需要将委托的事件处理程序分配给 static 父级，如下所示：

jQuery($ => {
  $(document).on('click', '.user_bookmark', function(e) {
    e.preventDefault();
    let post_id = $(this).data("post_id");
    let nonce = $(this).data("nonce");

    console.log(post_id, nonce);
    console.log('ajax request here...');
  });
})