jQuery，在点击回调中操作动态创建的元素

Question

我有一个带有此（简化）html 的移动菜单

<ul id="mobile_menu">
    <li class="menu-item menu-item-has-children">
        <a href="#">Menu with Submenu</a>
        <ul class="sub-menu">
            <li class="menu-item"><a href="#">Submenu item 1</a></li>
            <li class="menu-item"><a href="#">Submenu item 2</a></li>
            <li class="menu-item enu-item-has-children"><a href="#">Submenu item 3</a>
                <ul class="sub-menu">
                    <li class="menu-item"><a href="#">Sub-Submenu item 1</a></li>
                    <li class="menu-item"><a href="#">Sub-Submenu item 2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="menu-item"><a href="#">menu item 2</a></li>
    <li class="menu-item"><a href="#">menu item 3</a></li>
</ul>

我创建了一个辅助元素来关闭移动设备中的子菜单。 我在函数中创建它，如下所示：

var mainli_a =  jQuery('#mobile_menu .menu-item-has-children > a');

mainli_a.on('touchstart click', function(e){
                  
                    "use strict";
                    var link = jQuery(this);
                    if (link.parent().hasClass('active')) {
                        return true;
                    } else {
                        link.parent().addClass('active')
                        link.parent().append('<span class="closesubmenu"> </span>');  // here I create the element
    
                        e.preventDefault();
                        return false; 
                    }
                });

我所说的元素是span.closesubmenu

然后，单击它，我想将一个类删除到其父元素，然后删除元素 .closesubmenu 本身。

这就是我尝试的方法：

   jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){

            jQuery(this).parent().removeClass('active', 0, 'linear', function(){
                 jQuery(this).remove(); // this does not work
            });

    });

我在关闭子菜单的回调中尝试哪种操作并不重要。 它不起作用。

它只能这样工作：

 jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){
  
         jQuery(this).remove(); // this works    

    });

此外，如果我只在 2 行上进行 2 个操作，则只有第一个有效：

 jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){
  
         jQuery(this).remove(); // this works  
         jQuery(this).parent().removeClass('active'); // this does not work 

    });

 jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){
  
         jQuery(this).parent().removeClass('active'); // this works  
         jQuery(this).remove(); // this does not work 

    });

我在这里缺少什么？

更新：

我也尝试按照答案中的建议，将元素存储在 var 中以在回调中使用，如下所示：

            jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){
                var self = this;
                jQuery(self).parent().removeClass('active', 0, 'linear', function(){
                    jQuery(self).remove();
                });
        });

但是它不起作用。

更新2：jsFiddle

Answer 1

您传递给

.removeClass()

的这些参数是什么？

jQuery(this).parent().removeClass('active', 0, 'linear', function(){
    jQuery(this).remove();
});

它只需要类名。而且它不是带有回调的异步操作。 只需删除类，然后删除元素：

jQuery(this).parent().removeClass('active');
jQuery(this).remove();

示例。