javascript - jQuery .on()的执行与预期不同

使用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的文档，但是还没有弄清楚为什么它采用这种方式。有任何想法吗？

最佳答案

这实际上是正确的行为，因为即使您单击了子元素，jQuery也会考虑单击.medallion-image。这很好用，因为假设您有目录，并将.on绑定到该行。而是根据与行交互的事实触发在行中构建一堆不同元素的子选择器。这是与您遇到的“问题”类似的行为：

https://jsfiddle.net/zLfqoj65/

一种执行此方法的方法，使其仅在父级上执行该函数，并且只有父级元素才能在您的.on中进行检查，以确保这是您想要的元素：

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

这将检查您单击的元素是否具有所需的确切类。这里的例子：

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