JavaScript functions not working when HTML is loaded through PHP/JS

Asked Nov 12 '18 at 14:00

Active Nov 12 '18 at 14:06

Viewed 61 times

I am trying to load in some HTML trough Ajax. The HTML has a funtion assigned to it with the ONCLICK attribute. Now when i execute the code the function is completely ignored. The HTML is loaded in perfectly.

Below is a simplified version of what i am trying to do.

PHP code for creating the HTML (gethtml.php):

$html = '<a onclick="thefunction()">Click this to trigger JS function</a>';
$data = array(
    'html' => $html
);
echo json_encode($data);

Loading the HTML trough javascript (main.html):

function load_HTML()
    {
        $.ajax({
            url:"actions/gethtml.php",
            method:"POST",
            dataType:"JSON",
            success:function(data)
            {
                $('#container_id').html(data.html);
            }
        })
    }

Javascript function for loaded HTML (main.html):

function thefunction(){
   //any function
}

I hope anyone can help me!

edited Nov 12 '18 at 14:06

asked Nov 12 '18 at 14:00

Wibo Kuipers

Where does `data.tabledata` come from? Your PHP is certainly not supplying it. A quick look at your JS console would have quickly pointed you to some issues. – MonkeyZeus Nov 12 '18 at 14:04
Where are you getting `tabledata` ? – Masivuye Cokile Nov 12 '18 at 14:06
Oops! My bad, i changed it. – Wibo Kuipers Nov 12 '18 at 14:07
did you try onclick="return thefunction();" instead of onclick="thefunction()"? – elk Nov 12 '18 at 14:11
So it's working now? You need to check your JS console and figure out which error it is yelling at you... – MonkeyZeus Nov 12 '18 at 14:11
Check browser devtools console for errors. – James Nov 12 '18 at 14:13
@MonkeyZeus No that was just in the example for this question. – Wibo Kuipers Nov 12 '18 at 14:13
Umm okay, well that was a useless example. Anyways, what error are you getting in your JS console? – MonkeyZeus Nov 12 '18 at 14:14
@elk Also not working.. – Wibo Kuipers Nov 12 '18 at 14:15
@MonkeyZeus None, the whole thing is being ignored – Wibo Kuipers Nov 12 '18 at 14:15
Should work fine as seen in this demo https://jsfiddle.net/bz5oe2yq/ – charlietfl Nov 12 '18 at 14:16
Use event delegation for dynamically created elements: https://stackoverflow.com/questions/16598213/how-to-bind-events-on-ajax-loaded-content – Billy G Nov 12 '18 at 14:18
Without onclick: http://jsfiddle.net/7Lc18vdb/2/ – Michael Röhrig Nov 12 '18 at 14:20
1

@BillyG Thank you!! That worked perfectly! – Wibo Kuipers Nov 12 '18 at 14:28
@MichaelRöhrig he didn't mention using jQuery. – Dropout Nov 12 '18 at 15:06
@WiboKuipers you shouldn't be using the onClick html functionality, it's considered deprecated and a bad practice. If you're using some framework create bindings with it and if not you're still better off with using event listeners - https://www.w3schools.com/js/js_htmldom_eventlistener.asp – Dropout Nov 12 '18 at 15:09
@Dropout I assumed he did because of his code, where he does ;-) – Michael Röhrig Nov 12 '18 at 15:39

JavaScript functions not working when HTML is loaded through PHP/JS

0 Answers0