How to use attrchange on dynamically generated elements
ncavanagh opened this issue · comments
Thank you for this great plugin! It works great on elements that are already on the page, but I have a need to capture style changes of elements that are dynamically generated. I am not very familiar with jQuery and am having trouble fitting your plugin in with some type of $("body").on() setup. Any help would be greatly appreciated.
Thank you!
The delegated event method (dynamic binding) won't work with the plugin as the plugin itself is not an event. The plugin captures the event triggered when an attribute is changed, normalize the data and trigger's a callback.
You should call the plugin after adding it to the DOM. For ex:
$('body').append('<p>My header<p>').attrchange(...
Let me know if it works for you.
Thank you for your reply.
Unfortunately I am not in control of when the element is loaded. On a user input I am calling a JS that loads a video player, and sometimes, not all the time, there is a “companion banner” div that will show a display ad during the pre-roll ad attached to that player. I was hopping to be able to to detect if the companion div is loaded and when the display style changes to resize the video player. All of my searching seems to be pointing to using a timer that polls the page. As this feels like a hack, and I have never had good luck with JS timers I was hoping for a more elegant solution.
-N8
On Apr 9, 2014, at 2:23 PM, Selvakumar Arumugam <notifications@github.commailto:notifications@github.com> wrote:
The delegated event method (dynamic binding) won't work with the plugin as the plugin itself is not an event. The plugin captures the event triggered when an attribute is changed, normalize the data and trigger's a callback.
You should call the plugin after adding it to the DOM. For ex:
$('body').append('
My header
').attrchange(...
Let me know if it works for you.
—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-40005675.
Is you script loading the video player synchronous? I am not sure if it is feasible, but you could add attrchange in the script that is called after loading the video.
Do you still have this issue?
Thank you for following up. We still have th issue, what we are going to do is add in a call to the script that loads the video player. Unfortunately this is not a high priority for our player developer as she has a 1000 other things on her plate, so it might be a while before we get this functionality setup. Her workload was one of the reasons why I looking for a JS solution to watch for a change on a dynamically generated element (an element created after the DOM is ready).
-N8
On Jun 21, 2014, at 6:19 PM, Selvakumar Arumugam <notifications@github.commailto:notifications@github.com> wrote:
Do you still have this issue?
—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-46767563.
I am in the exact situation of ncavanagh. Do you guys already have a solution for this?
It would be really easy If you can post a test case some where like http://jsfiddle.net
Thank you for responding so fast. The fiddle I coded is almost identical to my source and I use a plugin that requires a lot of others. The difference from my code is basically that I use local images, not from flickr.
The JSFiddle: http://jsfiddle.net/csa1wgdq/6/ (Edited: changed version 4 to 6)
What happens is: when I click on some image, they are loaded dynamically in the #blueimp-gallery .slides, and the miniatures goes to #blueimp-gallery .indicator.
What I need is to listen to them (the dynamically added images), when they are added and when the user changes the fullscreen image (using the arrow buttons, sliding or through the indicators)
Well, turns out I was able to modify one of those tons of plugins I am using to add the ".attrchange" in the proper place. Now it is warning me which image (in fullscreen) is the active.
Thank you for your time!
Glad it worked for you. I wasn't able to get to any of the issues lately.