0

So I need something similar to Facebook Messenger's gear button which can be seen only when a conversation box is hovered or is currently active (just to give an image to these words), but how can I associate the button to that object? The object nesting is really confusing me. This is what mine looks like right now.

table_data {

    item_1: { fruits: [ {}, ..., {} ]},
    item_2: { fruits: [ {}, ..., {} ]},
    ...
    ...
    item_n: { fruits: [ {}, ..., {} ]},
}

Each item is a div that has 3 buttons:

  1. Delete - deletes item and all content
  2. Options - opens popover options menu
  3. Expand - expands current item to show fruits array of objects

The user enters in a new item and then has the option to add objects to fruits array. 

document.getElementById("save").addEventListener("click", function() {
    table_data[newItem] = { fruits:[] };
    appendHTML(newItem);
    // helper function that appends HTML
}

So under options, user can "Add Fruits". How can I associate that "Add Fruits" to the correct item since the "Options" button is just appended HTML.

If it helps, the helper function looks like this.

function appendHTML(item) {
   $("#list").append('<li class="enter"><div class="listContent"><a href="#" class="close"></a><span class="itemName">'+item+'</span></a><a href="#" id="expand"></a><a href="#" id="gear"></a></div></li>');

}

If anyone happens to need an answer to this in the future...

$(document).on('click', "#list > li > .listContent > .gear", function() {
    $(this).next().slideToggle();
});
Toni Au
  • 77
  • 1
  • 8

1 Answers1

0

This is a duplicate of this question. There, you will find multiple answers. I think the best would probably be storing the element in a var and then you can easily target it with whatever you want after you append it

Community
  • 1
  • 1
blubberbo
  • 4,441
  • 4
  • 23
  • 36
  • Would you have any idea why the buttons might not work? I have a gear icon with id="gear" that gets appended. Why does only the one actually in the HTML file work but the others that were appended don't? – Toni Au Jun 23 '16 at 16:57
  • do all of the buttons have id="gear"? If there are multiple instances of an `id`, I would recommend using a class instead of an id – blubberbo Jun 23 '16 at 16:58
  • I used id so I could just do document.getElementById("gear").addEventListener("click", function(){...}); reading other questions now about appending buttons, just wondering if you happened to have a quick easy-to-understand answer – Toni Au Jun 23 '16 at 17:02
  • I'm suggesting that made they do not work because `document.getElementById("gear")` is going going to target the first one, not all of them. I think you will need to give them classes and then use JS or jQuery to select all of them, such as `$('.gear')` – blubberbo Jun 23 '16 at 17:04
  • That's true! So I have this solution: `$('body').on('click', '#gear', function() { $("#gearOptions").slideToggle("slow"); });` The button works.. but it toggles the wrong `#gearOptions`, how would I get to the one that corresponds to the `#gear` that was clicked? – Toni Au Jun 23 '16 at 18:18
  • You can use jQuery `$(this)`. So something like: `$('body').on('click', '#gear', function(e) { $(this).find("#gearOptions").slideToggle("slow"); });` – blubberbo Jun 23 '16 at 18:31
  • Unfortunately, `$(this)` doesn't work, (no pun intended). I tried everything and also changed the ID's to Classes. The button won't toggle any display now. – Toni Au Jun 23 '16 at 19:10
  • you can try `$('body').on('click', '#gear', function(e) { e.target.find("#gearOptions").slideToggle("slow"); });`. Generally in JS or jQuery, a good way to troubleshoot is use `alert('works');` in certain areas to see if your code is making it there. You can revert your code back to a working state, introduce some troubleshooting code like that and then move forward, keeping track of what breaks it and then trying to figure out why – blubberbo Jun 23 '16 at 20:33
  • I'm so blind, I hate myself. I thought `.gearOptions` was a child of `.gear` this whole time. Wasted my whole day... I'm fuming in my cubicle rn. But thank you so much for your help, I learned a lot today! – Toni Au Jun 23 '16 at 20:43
  • haha, of course, happy to help! That's ok. It happens to everyone. If you wouldn't mind, just mark this answer as correct so people (myself included) can tell the question has been answered. happy coding :) – blubberbo Jun 23 '16 at 20:45