Question

使用AJAX，我在一个WordPress页面上填充id为logos-page-main-content-wrapper（分配给一个名为mainContent的变量）的容器，该页面包含多个级别的后代;重要的（图像）后代具有类medallion-image。

以下jQuery函数的执行方式与我预期的不同：

jQuery(document).ready(function($){

    var mainContent = $('#logos-page-main-content-wrapper');
    var medallionImage = $('.medallion-image');
    var combinedMarkImage = $('.combined-mark-image');
    var monogramImage = $('.monogram-image');
    var wordmarkImage = $('wordmark-image');

    mainContent.on('click', medallionImage,function(){

        jQuery.ajax({
            url: ajax_object.ajaxurl,
            data: {
                action: 'validateUser',
                security: ajax_object.ajax_nonce,
                current_post_id: ajax_object.current_post_id
            },
            method: "POST",
            success: function(data){
                console.log(data);
                if(data != true){
                    window.location = window.location.hostname + '/login';
                }
            }
        });
    });
});

这个想法是，当用户点击medallion-image类的图像时，如果他们当前没有登录到WordPress，他们将被重定向到登录页面。 AJAX调用正常，但.on()函数响应mainContent的任何后代的点击，而不是仅点击medallion-image图像。据我了解，这不应该发生;只有medallion-image类才能响应点击次数。

我在jQuery API网站上搜索了.on的文档，但还没弄清楚为什么它会以这种方式运行。有任何想法吗？

Answer 1

这实际上是正确的行为，因为即使您点击了子元素，jQuery也会考虑点击.medallion-image。这很有效，因为想象一下，如果您有一个内容表，并将.on绑定到该行。而是根据您与行进行交互的事实，在它触发的行中构建一组不同元素的子选择器。这是类似于＆＃34;问题＆＃34;的行为。你有：

https://jsfiddle.net/zLfqoj65/

执行此操作的方法，只执行父项上的函数，只有父元素才能检查.on，以确保这是您想要的元素：

$('.outer').click(function(e) {
  if ($(e.target).hasClass('outer')) {
    // Execute code.
  }
});

这将检查您单击的此元素是否具有您想要的确切类。示例：

https://jsfiddle.net/zLfqoj65/2/

Answer 2

您可以使用CSS pointer-events属性阻止捕获mainContent上的单击：

pointer-events: none

并在奖章图片中使用以下内容将其重新打开：

pointer-events: auto

jQuery .on（）的表现与预期不同

2 个答案: