Best way to execute external Javascript function from HTML element's onclick event returned from an Ajax call
Question
index.php:
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="box"></div>
<div onclick="getContent()">Open Window</div>
</body>
</html>
script.js:
function getContent() {
//ajax call that returns the html from content.php and places it in the box div
}
function sayHello() {
console.log('Hello');
}
function sayGoodBye() {
console.log('Good Bye');
}
content.php:
<div onclick="sayHello()">Say Hello</div>
<div onclick="sayGoodBye()">Say Good Bye</div>
What is the correct way to make the functions sayHello() and sayGoodBye() work? Currently they do nothing.
2 answers
solution1
1 ACCPTED 2012-06-10 09:48:32
As your element comes from ajax and append to #box dynamically, so you need an delegate event handling.
$('#box').on('click', '#newElement', function() {
});
Syntax for delegate of .on() is:
$(container).on(eventName, target, handlerFunction);
To trigger you need to use
$('#box div').eq(0).click(); // sayHello()
$('#box div').eq(1).click(); // sayGoodBy()
NOTE
I think it should work normally
And its also possible to trigger those click events
solution2
0 2012-06-15 14:44:30
Please keep file index.php, script.js, content.php in the same folder.
index.php
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="box"></div>
<div onclick="getContent()">Open Window</div>
</body>
</html>
script.js
function getContent() {
//ajax call that returns the html from content.php and places it in the box div
$.ajax({
url: 'content.php',
success: function(data) {
$('#box').html(data);
}
});
}
function sayHello() {
console.log('Hello');
}
function sayGoodBye() {
console.log('Good Bye');
}
content.php
<?php
$strContent="";
$strContent.="<div onclick='sayHello()'>Say Hello</div>";
$strContent.="<div onclick='sayGoodBye()'>Say Good Bye</div>";
?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to execute a javascript function returned from ajax response
What's the best way to call php variables from an external domain?
How do I call a php function from javascript onclick() event?
if any method we have from html to run a function with onclick event from external html page?
images from ajax call onclick function
can't execute javascript onclick event from html which is being outputted by php
unable to call javascript function using button's onclick event
External PHP Function from an AJAX call
Is it possible to call a Javascript function from HTML independent of an event?
passing parameter on jQuery onclick function from html onclick event
Related Tags