OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

jQuery, manipulate dynamically created element in callback of a click on it

  • Thread starter Thread starter bluantinoo
  • Start date Start date
B

bluantinoo

Guest
I have a mobile menu with this (simplified) html

Code:
<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>

I create an helper element to close submenus in mobile devices. I create it in a function, like this:

Code:
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; 
                    }
                });

The element I'm speaking about is the span.closesubmenu

Then, on a click on it, I want to remove a class to its parent element, and then remove the element .closesubmenu itself.

This is how I try:

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

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

    });

It does not matter which manipulation I try in the callback to closesubmenu. it does not work.

It only work only like this:

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

    });

Furthermore, if I just put 2 manipulations on 2 lines, only the first one works:

Code:
 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 

    });

What am I missing here?

UPDATE:

I tried also as suggested in answers, to store the element in a var to use in the callback, like this:

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

But it is not working.

UPDATE 2: jsFiddle

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

UPDATE 3: Thanks to David (chosen answer) this is the correct and working fiddle: https://jsfiddle.net/bluantinoo/yr4gdjdz/6/

<p>I have a mobile menu with this (simplified) html</p>
<pre><code><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>
</code></pre>
<p>I create an helper element to close submenus in mobile devices.
I create it in a function, like this:</p>
<pre><code>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;
}
});
</code></pre>
<p>The element I'm speaking about is the span.closesubmenu</p>
<p>Then, on a click on it, I want to remove a class to its parent element, and then remove the element .closesubmenu itself.</p>
<p>This is how I try:</p>
<pre><code> jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){

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

});
</code></pre>
<p>It does not matter which manipulation I try in the callback to closesubmenu.
it does not work.</p>
<p>It only work only like this:</p>
<pre><code> jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){

jQuery(this).remove(); // this works

});
</code></pre>
<p>Furthermore, if I just put 2 manipulations on 2 lines, only the first one works:</p>
<pre><code> 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

});
</code></pre>
<p>What am I missing here?</p>
<p><strong>UPDATE:</strong></p>
<p>I tried also as suggested in answers, to store the element in a var to use in the callback, like this:</p>
<pre><code> jQuery('body').on('touchstart click', 'span.closesubmenu', function(e){
var self = this;
jQuery(self).parent().removeClass('active', 0, 'linear', function(){
jQuery(self).remove();
});
});
</code></pre>
<p>But it is not working.</p>
<p><strong>UPDATE 2</strong>: jsFiddle</p>
<p><a href="https://jsfiddle.net/bluantinoo/yr4gdjdz/3/" rel="nofollow noreferrer">https://jsfiddle.net/bluantinoo/yr4gdjdz/3/</a></p>
<p><strong>UPDATE 3</strong>: Thanks to David (chosen answer) this is the correct and working fiddle: <a href="https://jsfiddle.net/bluantinoo/yr4gdjdz/6/" rel="nofollow noreferrer">https://jsfiddle.net/bluantinoo/yr4gdjdz/6/</a></p>
 

Latest posts

G
Replies
0
Views
1
Gamal Othman
G
Top