I’m using a function to add images to a site. These go into a DIV, using .html() After that’s done I need those same images to show an effect on hover, but nothing happens when I hover them. If I type the same code I use in the .html() function, same class, etc, hover works.<\/p>\n
After lots of attempts, I narrowed my problem to this sample. Turns out the problem is how the container DIV exposes the code added through .html() … and my hover functions can’t find the dynamically added tags.<\/p>\n
Here’s my sample code:<\/p>\n
\n\nProblems\n\n\n\n
This line was already here
\n\n\n\nfunction createnewone(){\n $txthtml=\"
And this one got added dynamically
\";\n $(\"#DIVnewone\").html($txthtml);\n};\n$(document).ready(function() {\n createnewone();\n}); \n$(\"*\").on(\"click\", function(){\n alert( $(this).attr(\"id\") );\n});\n\n\n\n\n<\/code><\/pre>\nNotes:<\/strong> – This is just a raw example of my real problem. This is not what I’m actually trying to accomplish, but solving this one would make me solve the real one \ud83d\ude09 – The first two functions are from the actual code … after document is ready I load the pics and recursively add the html required to each DIV … – Third function is just so you guys can see my problem … It should be showing an alert with the ID of the element you click on (and it does for the 1st paragraph) … but check what happens when you click the second one … you don’t see the ID for that paragraph but the ID for the container DIV instead! – (yes, it also gives alerts for the other parents, up to the document, but hey, it’s just an example)<\/p>\n– If I manually add the paragraph to that same DIV, the “static” paragraph shows its ID when clicked on, but the “dynamic” one still shows the DIV ID.<\/p>\n
Please, advise?
\n(also, I need the script to stay at the bottom of my code, so it can “see” all the pics)<\/p>\n
EDIT so my point is clearer: I need a way to add content to a DIV so other functions see the new code.<\/p>\n
How would you guys replace this line so the sample code works as intended?<\/p>\n
$(\"#DIVnewone\").html($txthtml);\n<\/code><\/pre>\n\n- \n
Have you tried appending the new element to the div rather than setting it via html(), though I believe .html() should work as well.<\/p>\n
function createnewone(){\n $txthtml=\"
And this one got added dynamically
\";\n $(\"#DIVnewone\").append($txthtml);\n};\n<\/code><\/pre>\nthen you can use the below ON function (1.7+) to do what you need it to do when you have the mouse over the selector (‘#TXTnewone’). Note that the below will need to go into the “$(document).ready(function() { ...here... }<\/code>” function, this is to ensure the “body” tag has been loaded when assigning the on event to it.<\/p>\n$(document).ready(function() {\n createnewone();\n $(\"body\").on(\n {\n mouseenter: function () { $(this).css(\"color\",\"red\"); }\n , mouseleave: function () { $(this).css(\"color\",\"black\"); }\n }\n , \"#TXTnewone\"\n );\n});\n<\/code><\/pre>\nHere is a jsFiddle of the above working.<\/p>\n<\/li>\n
- \n
You’re probably looking for the live()<\/code> function.<\/p>\nor on()<\/code>, after jQuery version 1.7<\/p>\n\nDescription<\/strong>
\nAttach an event handler for all elements which match the current selector, now and in the future.<\/em><\/p>\n<\/blockquote>\n<\/li>\n- \n
Place your hover functions inside the event call that adds the dynamic content. Your hover functions are being evaluated before the content is added and aren’t re-evaluated after, causing them to be undefined<\/code>.<\/p>\nEDIT<\/strong>
\nRobert Harvey’s answer is much better than this, but the idea is the same.<\/p>\n<\/li>\n<\/ol>\nOriginally posted 2013-11-09 20:19:38. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
I’m using a function to add images to a site. These go into a DIV, using .html() After that’s done I need those same images to show an effect on hover, but nothing happens when I hover them. If I type the same code I use in the .html() function, same class, etc, hover works. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-533","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=533"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/533\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}