php - javascript or jQuery doesn't work in dynamically generated content - Stack Overflow

admin管理员组

文章数量:1221252

Morning people. How to make my javascript or jquery works in dynamically generated content.

Basically, i have created web page that generates contents, base on what user clicks on the navigation menu.

The problems i am facing:

1. when main page generate contents from content-page, jquery or javascript won't work.
2. but when i open up the content-page alone, everything works.

Information collected through searching:

jQuery.load() method ignores the script tag that comes together with the that content generated dynamically.

So i try the following:

1. Put the tag that i need in main page, not in content-page. it doesn't work. seem like the jquery can't find the content element, because they are dynamically generated.
2. Since jQuery.load() ignores script tag, I tried pure javascript ajax like how w3schools teaches, the xmlhttp way, to generate the content. It doesn't work.
3. When a button is clicked. no response in console.

---

Example contact.php

<script type="text/javascript">
$(function() {
    $("#submitUser").click(function(e) {
    var fname = $("#fname").val();
    $("#theresult").text(fname);
    e.preventDefault();
});
});
<form id="contactForm"> 
<label for='fname' >First Name</label><br/>
<input id="fname" type="text" name="fname" maxlength="100" />
</form>
<div id="theresult"></div>

When this contact.php is dynamically generated into other page, it doesn't work. When I click "submit" button, console shows no response. seem like the jquery is not exists.
But when I open it alone in browser, it works.

Morning people. How to make my javascript or jquery works in dynamically generated content.

Basically, i have created web page that generates contents, base on what user clicks on the navigation menu.

The problems i am facing:

1. when main page generate contents from content-page, jquery or javascript won't work.
2. but when i open up the content-page alone, everything works.

Information collected through searching:

jQuery.load() method ignores the script tag that comes together with the that content generated dynamically.

So i try the following:

1. Put the tag that i need in main page, not in content-page. it doesn't work. seem like the jquery can't find the content element, because they are dynamically generated.
2. Since jQuery.load() ignores script tag, I tried pure javascript ajax like how w3schools.com teaches, the xmlhttp way, to generate the content. It doesn't work.
3. When a button is clicked. no response in console.

---

Example contact.php

<script type="text/javascript">
$(function() {
    $("#submitUser").click(function(e) {
    var fname = $("#fname").val();
    $("#theresult").text(fname);
    e.preventDefault();
});
});
<form id="contactForm"> 
<label for='fname' >First Name</label><br/>
<input id="fname" type="text" name="fname" maxlength="100" />
</form>
<div id="theresult"></div>

When this contact.php is dynamically generated into other page, it doesn't work. When I click "submit" button, console shows no response. seem like the jquery is not exists.
But when I open it alone in browser, it works.

• php
• javascript
• jquery
• dynamic-content

Share Improve this question Follow edited Oct 14, 2012 at 15:57 Dollar Money Woof Woof asked Aug 18, 2012 at 20:32 Dollar Money Woof WoofDollar Money Woof Woof 1,06855 gold badges1818 silver badges3030 bronze badges 3

• 2 Restate your question. What exactly doesn't work? What do you do and what do you expect to happen? Have you checked error console in your browser? Which errors are reported? – Nikola Radosavljević Commented Aug 18, 2012 at 20:35
• 1 My advice is to make a very small test page that demonstrates the problem, so you can post the code. You might even find the solution by doing that. You definitely can use javascript/jquery returned from ajax... I did it yesterday. Have you tried using jQuery's .html() method to insert the content? – AlexMA Commented Aug 18, 2012 at 20:36
• @AlexMA .html() to insert the whole thing and the dynamically generated jquery will work? i haven't try. imma go try now – Dollar Money Woof Woof Commented Aug 19, 2012 at 0:19

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 12

For dynamically generated elements you should delegate the events, you can use the on method:

$(function() {
    $(document).on('click', '#submitUser', function(e) {
       var fname = $("#fname").val();
       $("#theresult").text(fname);
       e.preventDefault();
    });
});

live() method is deprecated.

Taking a wild stab in the dark here since your question isn't very well-described, but perhaps you're trying to use .click() and so on to bind events to things that are getting dynamically loaded into the page?

If so, you probably want to look at .on() instead.

You need to use live event.

As an example, if your generated content contain a click event, you could do this:

$(".something").live("click", function({ 
// do something
)};

For dynamically generated fields use .on() JQuery method:

$(document).on('click', '#MyID', function(e) {
    e.preventDefault(); // or you can use "return false;"
});

本文标签： phpjavascript or jQuery doesn39t work in dynamically generated contentStack Overflow