Good day

This is not how I can not figure out how to properly organize the code, namely, to work with events

There is a normal block

<div id="content"> тут разные теги </div>

This block is periodically added / replaced with html code.

Roughly speaking, it is possible to say something like a site that works without refreshing the page, respectively, the js code is loaded only once when you first enter the site

In general, the essence of the problem. Suppose in this block id = "content" added messages "chat"

 <div id="content"> <div id="wrapChat"> <div class="message"> <span class="remove">Удалить</span> Тут сообщение </div> <div class="messgae"> <span class="remove">Удалить</span> Тут сообщение </div> </div> </div>

Or there goods

 <div id="content"> <div class="item"> Тут товар 1 </div> <div class="item"> Тут товар 2 </div> </div>

The question is how to properly hang events on dynamic content?

Of course, the first thing that this “event delegation” thought was, but there is one big BUT

A lot of different content is loaded into the block, it turns out that for each button you need to hang an event through id = "content" of the type:

 $(document).ready(function () { var content = $("#content"); content.on("click", "#wrapChat .remove", function (e) { // тут чо-то важное }); content.on("mouseenter", "#wrapChat .message", function (e) { // тут чо-то важное }); content.on("click", ".item", function (e) { // тут чо-то важное }); // ... // ... // ... // ... // ... // ... });

And what if the forum uploads there, deleting messages, adding, quoting, answering, there are a lot of different buttons on which you need to broadcast events

It seems to me somehow wrong, or does it seem to me? )

I would be grateful for any help)

For me, this is all a wonder since I am more on the server part of the "walk"

PS Because of my "cockroaches" I can not hang the event on a straight line in html type

 <div class="item" onclick="">
  • send a script with events (delegation continue to use) as part of dynamic content. In scripts that add event handlers, check if they have already been added. - Igor

3 answers 3

The event can be hung on a class or an arbitrary selector, for example:

 $('.contact-addr a').click(function(event) { .... });

For dynamic elements, click () does not work; for them, do this:

 $('.portfolio_filter').each(function(){ var $this_filter = $(this); $this_filter.on('click', 'a', function(){ .... }); });
  • Dynamic content, jquery about the new html will not just know, html which is loaded, say, ajax - ZeroTwink
  • Nonsense is complete. Just will be. This is exactly what I did with .on () for content (galleries), loaded via ajax. - KAGG Design
  • I pulled this portfolio-filter from my website, where ajax is - KAGG Design
  • I wrote var content = $ ("# content"); content.on ("click", "#wrapChat .remove", function (e) {// something important here}); But you need to immediately write a bunch of such handlers as I load js only once when I first visit the site, it turns out when the event will "pop up" it will be checked against this bunch of handlers - ZeroTwink
  • and read the first sentence? ))) You can hang on the class. One handler per 100,500 items at once. - KAGG Design

This method is suitable for dynamically appearing elements with the class "mySelector"

 $(document).on('click', '.mySelector', function(e) { // обработка события })

    DinContent class - everything that loads on the page, on any tag, put it on some kind of photo, doc, chat and dt and tp. also add an id to the tag - for a photo this is the number of a photo, for a dock - the name of a dock, for a chat - a user name

    It turns out that the DivContent class was clicked on, the property was determined, the type of content was determined according to the property, and how you handle it,
    by aidi got exactly the tag that was clicked

    as a result, you have the type of the selected content, by type you send the content to the function that works with this type of content, by aidi work with the element you need in the specified function ...