0
<li class="nav-item mx-2 dropdown" id="bookmarks">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <i class="fas fa-bookmark fa-lg fa-fw"></i>
</a>
<div class="dropdown-menu bookmarks"><a class="dropdown-item" href="http://localhost:8080/articles/foobar/barfoo">
        <i class="far fa-file-alt fa-fw fa-lg"></i>
        Foobar
    </a>
    <a class="dropdown-item" href="http://localhost:8080/articles/foobar/barfoo">
        <i class="far fa-file-alt fa-fw fa-lg"></i>
        Foobar
    </a>
    <a class="dropdown-item" href="http://localhost:8080/articles/foobar/barfoo">
        <i class="far fa-file-alt fa-fw fa-lg"></i>
        Barfoo
    </a>
</div>
</li>  

$('#bookmarks').on('click', function(e) {
    console.log('WORKED ONCE?');
    $.get('/foo/bar/bookmarks/', function(data) {
        $('#bookmarks .bookmarks').html(data);
    });
});  


@LOOP <a class="dropdown-item" href="{!! url($bookmark->url) !!}">FOOBAR</a> @ENDLOOP

I have this piece of code, a Bootstrap dropdown, that gets populated by clicking on it. However, any other succeeding click events on the #bookmarks element won't work. I've tried assigning the event like this: $(document).on('click', '#bookmarks', function() ...), same thing... it would stop working entirely even. What am I doing wrong? I need it to continuously have that click event to update dropdown list as necessary.

Any thoughts?

NOTE: the @LOOP entity contains the view data AJAX is suppose to receive once it's completed. It's confirmed to be working, but it's only working once.

Valkyrurr
  • 119
  • 1
  • 12
  • Where do you close `li` tag? These html structure makes no sense. – SilverSurfer Oct 08 '18 at 07:51
  • @SilverSurfer, edited. `li` not shown due to formatting error. anyway, the bootstrap markup is a straight lift from Bootstrap's documentation as seen [here](https://getbootstrap.com/docs/4.0/components/navbar/). – Valkyrurr Oct 08 '18 at 07:54
  • To add, this one [here](https://stackoverflow.com/questions/17715274/jquery-click-function-doesnt-work-after-ajax-call) won't work for me. – Valkyrurr Oct 08 '18 at 07:55
  • I see you want replace only anchor tags with the new. But you are also replacing the `div.bookmarks`. – SilverSurfer Oct 08 '18 at 07:59
  • Yes? But, I even tried using `append()` instead of `html()`. What's more confusing for me is that the `console.log('WORKED ONCE?');` bit won't work as well the second time around. Do you have any suspicions as to why? What am I not getting? – Valkyrurr Oct 08 '18 at 08:02
  • Maybe you could try add `e.preventDefault()`. – SilverSurfer Oct 08 '18 at 08:04
  • Yes. I have tried that one. Same thing. For what it's worth, I now only have `e.preventDefault()` and the `console.log` inside the `.on(click)` event, removed the AJAX, console output only shows once as well. – Valkyrurr Oct 08 '18 at 08:08
  • Solution [here](https://stackoverflow.com/questions/28238157/how-to-catch-bootstrap-navbar-dropdown-event) surprisingly worked for me. – Valkyrurr Oct 08 '18 at 08:33
  • Issue similar as [this](https://stackoverflow.com/questions/28238157/how-to-catch-bootstrap-navbar-dropdown-event) one. Surprisingly. :D – Valkyrurr Oct 08 '18 at 08:34

0 Answers0