{"id":9853,"date":"2022-09-21T01:55:31","date_gmt":"2022-09-20T20:25:31","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/"},"modified":"2022-09-21T01:55:31","modified_gmt":"2022-09-20T20:25:31","slug":"solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/","title":{"rendered":"[Solved] How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-13980532\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"13980532\" data-parentid=\"13980330\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>Your code already works as is, you don&#8217;t need to do anything about the div not existing yet.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/jsfiddle.net\/97GZb\/\">http:\/\/jsfiddle.net\/97GZb\/<\/a><\/p>\n<pre><code>function toggleDiv(id){\n    $(\"#\" + id).toggle();\n}\n\nsetTimeout(function(){\n    $(\"body\").append(\"&lt;div id='defaultTab-28'&gt;I'm the div!!!&lt;\/div&gt;\");\n},5000);\n<\/code><\/pre>\n<p>with this html:<\/p>\n<pre><code>&lt;a href=\"https:\/\/stackoverflow.com\/questions\/13980330\/javascript:toggleDiv(\"defaultTab-28')\"&gt;Click me to toggle the div that will be appended in 5 seconds.&lt;\/a&gt; \u200b\n<\/code><\/pre>\n<p>And to answer your comment:<\/p>\n<blockquote>\n<p>I know using inline JS is not good when using JQuery, I could have used button click function from JQuery, but my question is : Is there any function like .on or .delegate to assign a function without an event<\/p>\n<\/blockquote>\n<p>No, there has to be an event of some kind to tell the javascript engine when to run the code. An element being added to the page is an Event, it is called a Mutation Event. there are also Mutation Observers that can handle this as well that were meant to be a replacement for Mutation Events. Neither of the two have very good cross-browser support.<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">4<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Your code already works as is, you don&#8217;t need to do anything about the div not existing yet. http:\/\/jsfiddle.net\/97GZb\/ function toggleDiv(id){ $(&#8220;#&#8221; + id).toggle(); } setTimeout(function(){ $(&#8220;body&#8221;).append(&#8220;&lt;div id=&#8217;defaultTab-28&#8242;&gt;I&#8217;m the div!!!&lt;\/div&gt;&#8221;); },5000); with this html: &lt;a href=&#8221;https:\/\/stackoverflow.com\/questions\/13980330\/javascript:toggleDiv(&#8220;defaultTab-28&#8242;)&#8221;&gt;Click me to toggle the div that will be appended in 5 seconds.&lt;\/a&gt; \u200b And to answer your comment: &#8230; <a title=\"[Solved] How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/\" aria-label=\"More on [Solved] How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[346,333,388],"class_list":["post-9853","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-javascript","tag-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[Solved] How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Your code already works as is, you don&#8217;t need to do anything about the div not existing yet. http:\/\/jsfiddle.net\/97GZb\/ function toggleDiv(id){ $(&quot;#&quot; + id).toggle(); } setTimeout(function(){ $(&quot;body&quot;).append(&quot;&lt;div id=&#039;defaultTab-28&#039;&gt;I&#039;m the div!!!&lt;\/div&gt;&quot;); },5000); with this html: &lt;a href=&quot;https:\/\/stackoverflow.com\/questions\/13980330\/javascript:toggleDiv(&quot;defaultTab-28&#039;)&quot;&gt;Click me to toggle the div that will be appended in 5 seconds.&lt;\/a&gt; \u200b And to answer your comment: ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-20T20:25:31+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed]\",\"datePublished\":\"2022-09-20T20:25:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\\\/\"},\"wordCount\":190,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"html\",\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\\\/\",\"name\":\"[Solved] How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-09-20T20:25:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed] - JassWeb","og_description":"[ad_1] Your code already works as is, you don&#8217;t need to do anything about the div not existing yet. http:\/\/jsfiddle.net\/97GZb\/ function toggleDiv(id){ $(\"#\" + id).toggle(); } setTimeout(function(){ $(\"body\").append(\"&lt;div id='defaultTab-28'&gt;I'm the div!!!&lt;\/div&gt;\"); },5000); with this html: &lt;a href=\"https:\/\/stackoverflow.com\/questions\/13980330\/javascript:toggleDiv(\"defaultTab-28')\"&gt;Click me to toggle the div that will be appended in 5 seconds.&lt;\/a&gt; \u200b And to answer your comment: ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/","og_site_name":"JassWeb","article_published_time":"2022-09-20T20:25:31+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed]","datePublished":"2022-09-20T20:25:31+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/"},"wordCount":190,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/","name":"[Solved] How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-20T20:25:31+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-can-we-attach-a-jquery-function-to-a-div-that-has-been-appended-after-the-page-was-loaded-without-any-event-being-triggered-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How can we attach a jquery function to a div that has been appended after the page was loaded, without any event being triggered [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=9853"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9853\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=9853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=9853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=9853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}