All geek questions in one place

How to use jQuery selectors from dynamic elements created from .ppend function?

I have this loop creating multiple divs with elements in it. I want to be able to attach a click event to every link with a linky class, and that link will read the contentID attribute.

I’m looking for it forever, I find cases of using selectors in dynamically created elements, but I just can’t apply to my case. Any tips?

for (i = 0; i < msg.length; i++) { var htmlCode = "<a href='/Controller/Details/" + msg[i].ID + "' style = 'float: left;'><img class='packageImage' border='0' src='" + msg[i].Size0Path + "' /></a>"; htmlCode += "<span style='float: left;margin: 5px 0px 0px 10px;'>" + "<b>" + msg[i].TheName + "</b><br>"; if (msg[i].IsPaused == true) { htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Resume</a>"; } else { htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Pause</a>"; } htmlCode += "</span>"; htmlCode += "<div class='clear'></div>"; $("#divContent").append(htmlCode); }

Given the answers, I'm trying to attach an event to the linky class, but I just don't know where, as more on this below, my instructions create dynamic elements from the result of ajax submit (post).

  success: function (msg) { $("body").on("click", "a.linky", function () { alert($(this).attr("contentID")); }); for (i = 0; i < msg.length; i++) { var htmlCode = "<a href='/Controller/Details/" + msg[i].ID + "' style = 'float: left;'><img class='packageImage' border='0' src='" + msg[i].Size0Path + "' /></a>"; htmlCode += "<span style='float: left;margin: 5px 0px 0px 10px;'>" + "<b>" + msg[i].TheName + "</b><br>"; if (msg[i].IsPaused == true) { htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Resume</a>"; } else { htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Pause</a>"; } htmlCode += "</span>"; htmlCode += "<div class='clear'></div>"; $("#divContent").append(htmlCode); } }
+4
source share
3 answers

Use the delegated form on :

 $("body").on("click", "a.linky", function() { alert($(this).attr("contentID")); });

You only need to do this once before creating dynamic content. It attaches an event handler to <body> , which will respond to any of its descendants that click on the a.linky selector. It does not matter whether these elements are in the DOM at the time the handler joins or are added later.

+11
source

In this case, you need to bind the event as soon as the element is created. But frequent binding and decoupling is a bad pattern.

So you must delegate the ie event; attach an event to the parent container of these controls that listen for events for their children and provide events to their children to whom they are delegated.

try it

 $('body').on('click' , 'a.linky', function() { alert('Content id is : '+ $(this).attr('contentID')); });
+3
source

Just find the item after adding the event handler to it:

 $("#divContent").append(htmlCode) .find('.linky') .click(function(){ //your click handler });
+1
source

Source: https://habr.com/ru/post/1436995/

More articles:


All Articles