CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Callum Kerr
Callum Kerr

Reputation: 144

Issue with jQuery AJAX - code runs on load, then nothing

thanks for taking a look at my question!

This has been driving me nuts for hours. I'm trying to load and render a file into div on my page using jQuery AJAX. For some reason, any jQuery (or vanilla JS) is running when it's loaded, but any subsequent functions that should run on a click, don't run. HTML is rendered and updated in the DOM, but any script tags are not there.

I'm building a WordPress website on an existing installation, it can be viewed here: www.reckless-intent.com My issue can be reproduced by clicking the Contact link in the left sidebar.

At the top of the content area, a div will appear with the content 'BUTTON' in it. When the content loads, there is a console loge triggered. There is a function bound to the button, and it should trigger another console log - but nothing happens!

Here is all the code behind it:

The following function starts with displaying a loading animation, then initiates an AJAX call to the get-contact.php file.

$('#loading').fadeIn('fast', function() {
    $.ajax({
        type: "GET",
        url: "http://www.reckless-intent.com/wp-content/themes/ri2/page-templates/get-contact.php",
        success: postToPage
    }); // close AJAX call
}); // close function

This next function then sets the content that was requested into a proxy div, calculates its height, animates the height of the main container 'stage' and then displays the requested content in the stage div.

function postToPage(data, status) {
$('#proxy').html(data);
    var height = $('#proxy').height();
    $('#drawer').fadeIn('fast');
    $('#drawer').animate({'height': '300'}, 100);
    $('#stage').html(data);
    $('#stage').fadeIn(300);
    $('#loading').fadeOut('fast');  
}

The get-contact.php file contains the following:

<?php
/*
Template Name: get-contact
*/

require('../../../../wp-load.php'); ?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    console.log('Initial run');
    $('#test').on('click',test);
    function test() {
        console.log('button clicked');
    }
</script>

<div id="test">
    BUTTON
</div>

I really have no idea what's causing the issue. All of my calls are within the same domain, so I don't think there would be anything blocking the script from running that way.

Can you point me in the right direction? I won't change any of my code, if you need to view the code for yourself on the website.

I really appreciate your time! :)

Upvotes: 1

Views: 574

Answers (2)

MShah
MShah

Reputation: 316

The DOM is not ready when you reference the #test button. Use event delegation methods to allow the event to bubble up the DOM - I injected the following js into the site and now clicks are registered:

$('body').on({click:function(){console.log('clicked');}}, '#test');

Upvotes: 2

Matt
Matt

Reputation: 81

try wrapping the loaded javascript like this to wait for the html to be loaded

    <script type="text/javascript">
    $(function(){
       console.log('Initial run');
       $('#test').on('click',test);
       function test() {
        console.log('button clicked');
       }
    });
</script>

Upvotes: 3

Related Questions