jQuery,在点击回调中操作动态创建的元素
jQuery, manipulate dynamically created element in callback of a click on it
我有一个带有这个(简化)的移动菜单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
然后,点击它,我想删除一个 class 到它的父元素,然后删除元素 .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(选择的答案)这是正确且有效的 fiddle:https://jsfiddle.net/bluantinoo/yr4gdjdz/6/
您要传递给 .removeClass()
的所有这些参数是什么?
jQuery(this).parent().removeClass('active', 0, 'linear', function(){
jQuery(this).remove();
});
It's only expecting the class name(s). 而且它不是带有回调的异步操作。只需删除 class(es) 然后删除元素:
jQuery(this).parent().removeClass('active');
jQuery(this).remove();
我有一个带有这个(简化)的移动菜单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
然后,点击它,我想删除一个 class 到它的父元素,然后删除元素 .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(选择的答案)这是正确且有效的 fiddle:https://jsfiddle.net/bluantinoo/yr4gdjdz/6/
您要传递给 .removeClass()
的所有这些参数是什么?
jQuery(this).parent().removeClass('active', 0, 'linear', function(){
jQuery(this).remove();
});
It's only expecting the class name(s). 而且它不是带有回调的异步操作。只需删除 class(es) 然后删除元素:
jQuery(this).parent().removeClass('active');
jQuery(this).remove();