Question

Im having some issues with query and binding as it seems.

in my _Layout i got the jquery at the bottom of the page, it got a .on('click')

In got a partialView that got a “add item” link, when i click it makes a $.post() that returns a parialview and populates it in a div container.

Next time when i try to add another item with a click on the same link, it just acts like a link and refreshed the site, like it lost the binding to the jquery. If i choose to have the jquery in the partial that renders over it work every time, but for the sake of structure i dont want to have jquery scripts in the middle of the page.

Why is that and what can i do?

EDIT:
this is the bind i got. it works like before just once.

$('.menu-day').on('click', 'a.addItem', function (e) {
          e.preventDefault();
          console.log('ok');
          addRow($(this).attr('id'));
});

Answer 1

Using $().on(‘click’, function() { … }) works a lot like a traditional .click() binding in that the element has to exist on the page before you bind it. For example:

$("ul li").on('click', function() { ... })

So that isn’t going to work with dynamically added list elements. What you can do is specify a selector inside the click which will listen for events that bubble up to the context. For example:

$("ul").on('click', 'li', function() { ... });

Now clicks on list items will trigger regardless of when they were added, since it’s the container list that was bound and is simply listening for a specific eventTarget.