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

https://jsfiddle.net/bluantinoo/yr4gdjdz/3/

更新 3 ：感谢 David（选择的答案）这是正确且有效的小提琴： https : //jsfiddle.net/bluantinoo/yr4gdjdz/6/

Answer 1

您传递给.removeClass()所有这些参数是什么？

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

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

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

例子。