Issues with jquery delegate

Question

I'd like know how to fire unique Handler triggered by clicked element loaded dynamically in parent div (so delegate) or when is directly loaded.

Firstly, <a class="manage-lnk>Manage</a> Elements are loaded directly, but after, further there are loaded dynamically

html

    <div id="viewContainer"> 
       <a class="manage-lnk">Manage</a>
    </div>

lib.js.

I have to find this tip for it to work in both cases

 $(document).on('click','.manage-lnk',function(){
     alert(1);
 });

  $('.manage-lnk').on('click',function(){
     alert(1);
  });

what i want is to fire alert(1) although the element is dynamically loaded or not.

(PS:Excuse me for my english i speak french)

`$('.manage-lnk').on('click'...` is only going to work with the links that are there when it runs so it is not going to work with dynamic links. Simple test would show that. — epascarello, Dec 16 '19 at 21:24
Everytime you dynamically load another block of that HTML, you need to fire the same JS again to attach the event to it. — Adam, Dec 16 '19 at 21:25
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Heretic Monkey, Dec 16 '19 at 21:31
@HereticMonkey the problem is that the html block is loaded firstly directly, and after it's loaded dynamically in a div. So when it's directly load, not need to delegate, but when it's loaded dynamically a use the second code that delegate. However i want **unique** code for the two situation. Don't want to write two codes for each case — ModernCoder, Dec 16 '19 at 21:46
You're saying two different things in your last two sentences. You say you want unique code for the two situations, but you don't what to write two codes for each. Well, if you want unique code for each, that's going to have to be different (that's what unique means)... — Heretic Monkey, Dec 16 '19 at 21:50
@HereticMonkey , pls one code for the two situations i'meant — ModernCoder, Dec 16 '19 at 22:30
If one code for the two situations is what you need, the duplicate goes over how to accomplish that. The `$(document).on('click, '.manage-link'` code will work for both situations. — Heretic Monkey, Dec 17 '19 at 14:04

Adam · Answer 1 · 2019-12-16T21:33:58.440

-1

Fire this:

$('.manage-lnk').on('click',function(){
     alert(1);
  });

Each time you dynamically add another one of these:

 <div id="viewContainer"> 
       <a class="manage-lnk">Manage</a>
    </div>

If it's dynamically loaded after the JS has fired it will not have the event attached.

It would make sense to add it to a function you can call just after the code that dynamically adds in the HTML:

function addNewHtmlSectionFunctionName() {
  //Code to add div dynamically
}

function attachClickEventToManageLnk() {
    $('.manage-lnk').on('click',function(){
         alert(1);
      });
}

$(function() {
    addNewHtmlSectionFunctionName();
    attachClickEventToManageLnk();
});

edited Dec 16 '19 at 21:33

answered Dec 16 '19 at 21:26

Adam

1,294
11
24

The whole point of attaching the event to `document` is so that you *don't* have to reattach the event handler every time. That code basically intercepts every `click` event that occurs on the document and checks if the element matches the selector, irrespective of when it was added. – Heretic Monkey Dec 16 '19 at 21:30
Indeed, and although that is true when attaching to the document, it's not working for him, and I have suggested a final solutions that doesn't use actually use that approach, but definitely worth pointing out! – Adam Dec 16 '19 at 21:33

Issues with jquery delegate

1 Answers1