jQuery does not work & lt; script> When the AJAX $ .load () method is called by clicking on the event

advertisements

I've been struggling with this for a while and can't figure it out. Hopefully it's something obvious that I missed.

Here's the code:

$(document).ready(function() {

$('#clickbox').load('eventpage/clicks.html.php #click2', function () {
    console.log('click2 loaded');
    $(this).hide()
    .fadeIn(3000);

    $('#click2').click(function(e) {
        e.preventDefault();
        console.log('click2 clicked');
        $('#bizdev').load('pagewithscripttags.php', function (data) {
            console.log(data);
            console.log('#bizdev is loaded, but scripts are not run');
            $('#bizdev').hide();
            console.log('bizdev hidden');
        });
        $('#content').hide();
        $('#bizdev').show();
    });
});

When I run this (from an external js file), the file 'pagewithscripttags.php' is loaded into the DOM on the click event, but the scripts are not executed and I can't figure out why. HELP!

However, when I move the load method into the callback function of the first load, the file is inserted into the DOM and the scripts are run:

$(document).ready(function() {

$('#clickbox').load('eventpage/clicks.html.php #click2', function () {
    console.log('click2 loaded');
    $(this).hide()
    .fadeIn(3000);

    $('#bizdev').load('pagewithscripttags.php', function (data) {
            console.log(data);
            console.log('#bizdev loaded and scripts are run');
            $('#bizdev').hide();
            console.log('#bizdev hidden');
    }); 

    $('#click2').click(function(e) {
        e.preventDefault();
        console.log('click2 clicked');
        $('#content').hide();
        $('#bizdev').show();
    });
});

Why do the scripts run as part of the callback function, but not on the click event (which is when I need them to run)?

Here are the contents of pagewithscripts.php:

<script>console.log('this script was run');</script>
<script type="IN/MemberProfile" data-id="http://linkedin.com/publicprofileurl" data-format="inline" width='106px' data-related="false"></script>

The first script is run and appears on the console.log, but the second is just inserted into the DOM without being run, except when I place the .load() method outside of the click handler.

(I need to load the scripts on the click event because they take several seconds to run (they call the LinkedIn API) and there's freezing/lag when I run them on document ready.)


You probably need to tell the LinkedIn framework to re-scan the page.

IN.parse(domNode)

This is covered on the JavaScript API reference document on events here: https://developer.linkedin.com/documents/inauth-inevent-and-inui