0

I am trying to get this to work for a while now and dug around, but so far have found no solution.

CASE

I have a tree-view in which I can click on an item within that tree-view to load data in a couple of tab-panes. This works fine via AJAX.

Other options, like changing data within the input files and automatically saving (using pretty much an onkeyup at the inputs) works fine too, no problem here.

One of my tab-panes has a sidebar with a button, in which I want users to assign a profile to this data. The jQuery is as following:

$('#profiles').on("click", ".content-container", function(e, data) { 

    e.preventDefault();
    
    console.log('i got hit in the face');
    
});

This is in my main.js file.

The rest of my 2000 lines work fine, so it isn't the JS file or the opening of jQuery.

The .content-container is the static item in which I load my pane controls where, within, the underlying HTML has been placed.

<div class="menu-section active">
    <ul class="nav side-menu">
         <li class="">
             <a href="http://localhost/etim" id="profiles" class="">
                 <i class="fa fa-puzzle-piece "></i>
             </a>
         </li>
    </ul>
</div>

For the sake of argument, this is the most basic I'll put down the button. You click on a href in that sidebar, and it should simply give me a console.log back.

However, every time it refreshes the page since my href is being automatically filled with my standard URL (no # but a reference to localhost), hence the e.preventDefault. When I click on this button it fails to prevent the default action and reloads the page anyway.

I thought I did everything right by assigning it to the .on since I know it will be placed later in the code, but apparently it still doesn't see it in my code.

Daniel_Knights
  • 7,940
  • 4
  • 21
  • 49
Dorvalla
  • 5,027
  • 4
  • 28
  • 45
  • 1
    Close. But just using `.on()` isn't a magic wand. The key is that `$('#profiles')` finds nothing when it executes, since that element is added to the page later. Bind to an ancestor element that exists at the time of the binding, and use `#profiles` in the selector passed to `.on()`. – David Aug 19 '20 at 19:48
  • Thanks! I didn't realize i had to swap those two arround, that i had to look within the static item for that item. I thought i had to use the id and interpreted the second value within the `.on()` function as the static item i had to look in – Dorvalla Aug 19 '20 at 19:53

0 Answers0