Dropdown Button Only Works Once

Question

I'm attempting to put a button in an HTML table that displays a dropdown menu when clicked, and closes when clicked or when the user clicks outside the menu. It only works one time, then the button appears to stop working entirely. No errors on the console to guide me in the right direction. Code: HTML:

<tr>
    <td><?php echo $row['first_name']; ?></td>
    <td><?php echo $row['last_name']; ?></td>
    <td><?php echo $row['u_email']; ?></td>
    <td><?php echo $row['partynumber']; ?></td>
    <td><?php echo $time; ?></td>
    <td class="dropcontainer"><button class="ellipsis" class="dropbtn" onclick="toggleDrop();">. . .</button>
        <div id="resDrop" class="dropdown-content">
            <a href="#">Seated</a>
            <a href="#">Cancelled</a>
            <a href="#">No Show</a>
            <?php if($row['notes'] != ""){ ?>
            <a href="#">Notes</a>
            <?php } ?>
        </div>
    </td>
</tr>

Javascript:

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function toggleDrop() {
  if (document.getElementById("resDrop").style.display != "block"){
    document.getElementById("resDrop").style.display = "block";
    document.getElementById("maindiv").innerHTML = document.getElementById("CurrentRes").innerHTML;
  }else{
    document.getElementById("resDrop").style.display = "none";
    document.getElementById("maindiv").innerHTML = document.getElementById("CurrentRes").innerHTML;
  }
}

$('html').click(function() {
   $('.dropdown-content').hide();
});

$('.dropcontainer').click(function(event){
  event.stopPropagation();
});

CSS:

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

I remarked the following statements, then it works.: $('html').click(function() { $('.dropdown-content').hide(); }); — The KNVB, Jan 19 '18 at 02:01
The remarked statement mean any mouse click would cause all element using "dropdown-content" css class hidden. I don't know why you add these statement. However, that is the main difference. — The KNVB, Jan 19 '18 at 02:43
Sorry if I'm misunderstanding - did you remove the line or change it? It's there so that any time someone clicks outside of the dropdown menu, the menu disappears, which is also a feature I'm trying to include. — Olivia, Jan 19 '18 at 04:03
I just comment the specified lines only. That mean I add "/*" before "$('html').click(function() {" and add "*/" after " $('.dropdown-content').hide(); });" — The KNVB, Jan 19 '18 at 05:36
It doesn't work to take that line out, and that function is needed to close the menu when the user clicks outside of the menu, anywhere else in the document — Olivia, Jan 20 '18 at 14:02

score 1 · Answer 1 · answered Jan 19 '18 at 02:38

The first time your page loads you can access the resDrop element by its id. After that, I suspect you are dynamically re-creating your content and that is what is causing your problems (although there isn't quite enough of your code to be 100% sure that is what you are doing.....)

What you need to do with dynamically created elements is associate their actions with a non-dynamic parent.

e.g.

 <button class="ellipsis" class="dropbtn" id="toggle-button" >. . .</button>

$(document).on("click", "#toggle-button", function () { 
    if($("#resDrop").css( "display" ) !== 'block') {
        $("#resDrop").css( "display", 'block' );
    } else {
        $("#resDrop").css( "display", 'none' );
    }

    $("#maindiv").html($("#CurrentRes").html());
})

In the example above, I've given your toggle-button an id and then I have attached the event handler for this to document so if you dynamically re-create the button, it should still work.

I've re-written your toggle function using jquery.

Thank you! I'm trying this tomorrow and will let you know how it goes. You're correct about dynamically re-creating content - please see www.lookoutweb.co/app.php?restid=1 for the entire page I'm working with. Are ID's necessary over classes? How would I do this with multiple buttons (there will be multiple table rows) without writing a function for every button? — Olivia, Jan 19 '18 at 04:07
You can just use [$("#resDrop").toggle()](http://api.jquery.com/toggle/) instead of the if-else. — Mikey, Jan 21 '18 at 16:15

Dropdown Button Only Works Once

1 Answers1