JQuery, манипулируйте динамически созданным элементом при обратном вызове щелчка по нему ⇐ Jquery

[Anonymous]

У меня есть мобильное меню с этим (упрощенным) HTML

Код: Выделить всё

[list]
[*]
[url=#]Menu with Submenu[/url]

[url=#]Submenu item 1[/url]
[*][url=#]Submenu item 2[/url]
[*][url=#]Submenu item 3[/url]

[url=#]Sub-Submenu item 1[/url]
[*][url=#]Sub-Submenu item 2[/url]
[/list]



[*][url=#]menu item 2[/url]
[*][url=#]menu item 3[/url]

Я создаю вспомогательный элемент для закрытия подменю на мобильных устройствах.
Я создаю его в функции, например:

Код: Выделить всё

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(' ');  // 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
});

});

Не имеет значения, какую манипуляцию я пытаюсь выполнить в обратном вызове closesubmenu.
это не работает.
Это работает только так: это:

Код: Выделить всё

 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: Благодаря Дэвиду (выбранный ответ) это правильная и работающая скрипка: https://jsfiddle.net/blantinoo/yr4gdjdz/6/

Подробнее здесь: https://stackoverflow.com/questions/420 ... lick-on-it