CODEWITHSUNDEEP
jquery
user2909486
user2909486

Reputation: 557

appending to an element only once

I want to append a menu on click. There are lots of results (class="worked_btn"), and I want to be able to click on any result and append this menu. I added the counter so that it will only show the menu once, but the problem is that if someone wants to click on another .worked_btn class, it will not show the menu, as the counter is no longer 0.

So how do you append something only once? I have also tried after and appento, prepend, etc, but still no luck. So how do I add this new ul element after the .worked_btn class element once.

jQuery(document).ready(function() {
counter = 0; // used to make sure it only shows once
$('.worked_btn').click(function(){
    if(counter < 1) {
        $(this).append('<ul class="worked_menu"><li class="menu_send">Send Email</li><li class="menu_worked">Set as Worked</li><li class="menu_not">Set as Not Worked</li></ul>');
        counter++;
    }
});
});

UPDATE We also want to be able to hide the menu as well, and have the ability to show it again. Like a toggle.

Upvotes: 0

Views: 1454

Answers (3)

Edward
Edward

Reputation: 1914

Instead of a counter, you can try add a new class to indicate if it has been clicked or not.

$('.worked_btn').click(function(){
    if(!$(this).hasClass('selected')) {
        $('.worked_btn').removeClass('selected');
        $('ul.worked_menu').remove();
        $(this).addClass('selected');
        $(this).append('<ul class="worked_menu"><li class="menu_send">Send Email</li><li class="menu_worked">Set as Worked</li><li class="menu_not">Set as Not Worked</li></ul>');
    }
});

and clear the menu that is already displayed:

$('ul.worked_menu').remove();

EDIT: to remove it where clicking off anywhere in the document, just bind to the document a event handler:

$(document).click(function (event){
  if (!$(event.target).hasClass('worked_btn')) {
      $('.worked_btn').removeClass('selected');
      $('ul.worked_menu').remove();
  }
});

http://jsfiddle.net/bPUWZ/

Upvotes: 1

Travis J
Travis J

Reputation: 82267

jsFiddle Demo

Just use a data attribute flag. This will allow you append the menu to any worked_btn element which has not yet been clicked while preventing any worked_btn element which has been clicked from generating the menu. In order to determine which was clicked and which menu to remove, this state needs a little bit of management as shown.

jQuery(document).ready(function() {
 $('.worked_btn').click(function(){
  if($(this).data('wasclicked')==undefined) {
   $('.worked_menu').parent().removeData('wasclicked');
   $('.worked_menu').remove();
   $(this).append('<ul class="worked_menu"><li class="menu_send">Send Email</li><li class="menu_worked">Set as Worked</li><li class="menu_not">Set as Not Worked</li></ul>')
     .data('wasclicked',true);
  }else{
   $(this).removeData('wasclicked');
   $('.worked_menu').remove();   
  }
 });
});

Upvotes: 1

Populus
Populus

Reputation: 7680

If you set your menu as a variable, you can reuse the menu object.

Also since append doesn't copy but actually moves the object to it's new location. This should do exactly what you need.

jQuery( function($) {
    var menu = $('<ul class="worked_menu"><li class="menu_send">Send Email</li><li class="menu_worked">Set as Worked</li><li class="menu_not">Set as Not Worked</li></ul>');
    $('.worked_btn').click( function() {
        $(this).append(menu);
    }
});

Upvotes: 0

Related Questions