.load（）页面未运行jquery

Question

I'm using .load() functions to add content to my page, but I can't get any jquery scripts to work on the loaded content.

Here's an example of the loaded page and script:

<div class="content">

    <div class="sections">
        <div id="holder">
            <div class="resumelink" id="educ">
                Education
            </div>
            <div class="resumelink" id="work">
                Work
            </div>
            <div class="resumelink" id="skills">
                Skills
            </div>
        </div>
    </div>

    <div class="resumecontent">
        blah blah blah
    </div>

    <script src="jquery-2.0.3.min.js" type="text/javascript" ></script> 
    <script>
            $('#educ').click(function () {
                // any script here
            });

            $('#work').click(function () {
                // any script here
            });

            $('#skills').click(function () {
                // any script here
            });
    </script>
</div>

There's some other posts that seems to have the same problem, but none of them seem to be helping me. No scripts seem to be working no matter what I try - not when on the initial page that loaded the content - can't even get a console.log script to work.

The , provided by @Archer - is simply to add a jquery() tag and add to the original page instead of the loaded page. An example:

jQuery(function($) {
    $(document).on("click", "#educ", function() {
        // any function here
    });
});

Thanks!

Answer 1

Remove all the script references from the html that you load - they will not be executed when using .load() ...

<div class="content">
    <div class="sections">
        <div id="holder">
            <div class="resumelink" id="educ">
                Education
            </div>
            <div class="resumelink" id="work">
                Work
            </div>
            <div class="resumelink" id="skills">
                Skills
            </div>
        </div>
    </div>
    <div class="resumecontent">
        blah blah blah
    </div>
</div>

Then, in your original page (or preferably an included script file), add the following...

jQuery(function($) {
    $(".content").on("click", "#educ", function() {
        // any script here
    });

    $(".content").on("click", "#work", function() {
        // any script here
    });

    $(".content").on("click", "#skills", function() {
        // any script here
    });
});

Answer 2

I think you want to do it like this:

$('#container').load("content.html", function () {
     $('#educ').click(function () {
            // any script here
     });

     $('#work').click(function () {
          // any script here
     });

     $('#skills').click(function () {
          // any script here
     });
});

I don't think Javascript gets executed inside a load call, so you need to put it in the callback to get it to execute.

Answer 3

Bind event after DOM ready, use this code

 <script>
    $(document).ready(function(){
                $('#educ').click(function () {
                    // any script here
                });

                $('#work').click(function () {
                    // any script here
                });

                $('#skills').click(function () {
                    // any script here
                });
    });
        </script>

Answer 4

$（“ .resumecontent”）.load（“ insert.html”）;