2620

a jquery function appended html content to a div element. but that html elements cannot access a jqu

Question:

Previously I put my question in stackoverflow with all details. but I couldn't get any help. so now I am making my scenario simple and put my question again here.

I have three php files.

index.php request.php test.php

This is the Index.php file. In this file header I have two simple jquery functions. one function is loading separate php file in to the #editor-form-container div tag. other function is just giving an alert when it called.

In the body of this page I have a div tag having the text "click me for button" and this div is calling the posting_url() function once it clicked and that function is loading external php file as describe before.

<html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery.min.js" type="text/javascript"></script> <script> function posting_url() { var url = 'request.php'; var pdata = ""; $.ajax({ url: url, data: pdata, success: function(data) { $('#editor-form-container').html(data); } }); } $(document).ready(function() { $('.click_me_for_alert').on('click', function() { alert("You clicked a button."); }); }); </script> </head> <body> <?php // put your code here ?> <div onclick="posting_url()"> Click me for button </div> <div id="editor-form-container"> <button class="click_me_for_alert"> Iam a default button </button> </div> </body> </html>

this is the request.php file. it is just requiring the test.php file

<?php. require_once 'teset.php'; ?>.

then in the test.php file. I have a simple button. like this.

<button class="click_me_for_alert"> Iam a appended button </button>

Before I click the div that having the text "Click me for button" if I click the Iam a default button. then it gives me the alert.

But the problem is after I click the div tag "Click me for button" and after the Iam a appended button appears if I click that button it is not giving me that alert. no console errors.

why this is happening?

Answer1:

For dynamically created elements use delegated event handler:

$(document).ready(function() { $("#editor-form-container").on('click', '.click_me_for_alert', function() { alert("You clicked a button."); }); });

Answer2:

<a href="https://developer.mozilla.org/en/docs/Web/API/MutationObserver" rel="nofollow"><strong>Mutation-Observers</strong></a> is the one way to handle the issue in hand, Add the following code after document.ready function of your code:

<script> var target = $( "#editor-form-container" ); // Create an observer instance var observer = new MutationObserver(function( mutations ) { mutations.forEach(function( mutation ) { var newNodes = mutation.addedNodes; // DOM NodeList if( newNodes !== null ) { // If there are new nodes added $('.click_me_for_alert').on('click', function() { alert("You clicked a button."); }); } }); }); // Configuration of the observer: var config = { attributes: true, childList: true, characterData: true }; // Pass in the target node, as well as the observer options observer.observe(target, config); </script>

Put this code just before closing body tag. <a href="http://caniuse.com/#feat=mutationobserver" rel="nofollow">List of browsers that support mutation observers</a>

Although this will work fine but still <strong>SUGGESTION BY @REGENT IS MUCH PREFERABLE WAY TO DO IT</strong>.

Recommend

  • How to center a menu using flexbox [closed]
  • Embedding a Google map
  • jinja2 template not found and internal server error
  • How secure are apple APNS push notifications?
  • iOS Localization Doesn't Work with More Than 63 Files
  • Why does the font in these TD elements render at different sizes?
  • why calling cd shell command through system() or execvp() from a child process won't work?
  • I am receiving HibernateException “No Hibernate Session bound to thread, and configuration does not
  • MySQL: Update rows in table by iterating and joining with another one
  • Javascript CORS - No 'Access-Control-Allow-Origin' header is present
  • Sending cookie value via httpget but not getting the desired response
  • Why isn't obj.style.left = “200px”; working in this code?
  • Tell Git to stop prompting me for conflicts when none really exist?
  • JBoss External Properties Files in Classpath
  • Android - Material Design - NavigationView - How to put vertical scroll?
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Jquery UI tool tip close icon
  • Android fill_parent issue
  • MongoDB in PHP using aggregate to group by _id is null not working
  • QLineEdit password safety
  • Display issues when we change from one jquery mobile page to another in firefox
  • SSO with signing and signature validation doesn't work
  • To display the title for the current loaction in map in iphone
  • jquery mobile loadPage not working
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Why winpcap requires both .lib and .dll to run?
  • How to get icons for entities from eclipse?
  • trying to dynamically update Highchart column chart but series undefined
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal