从Ajax调用返回的HTML元素的onclick事件中执行外部Javascript函数的最佳方法

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>

使sayWello（）和sayGoodBye（）函数正常工作的正确方法是什么？ 目前，他们什么也没做。

Answer 1

由于您的元素来自ajax并动态追加到#box ，因此您需要委托事件处理。

$('#box').on('click', '#newElement', function() {

});

.on()委托的语法是：

$(container).on(eventName, target, handlerFunction);

要触发，您需要使用

$('#box div').eq(0).click(); // sayHello()

$('#box div').eq(1).click(); // sayGoodBy()

注意

我认为应该可以正常工作

看这里

而且还可以触发那些点击事件

检查一下

Answer 2

请将文件index.php，script.js，content.php保留在同一文件夹中。

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>";

?>

从Ajax调用返回的HTML元素的onclick事件中执行外部Javascript函数的最佳方法

问题描述

2 个解决方案

解决方案1
1 已采纳 2012-06-10 09:48:32

注意

而且还可以触发那些点击事件

解决方案2
0 2012-06-15 14:44:30

从Ajax调用返回的HTML元素的onclick事件中执行外部Javascript函数的最佳方法

问题描述

2 个解决方案

解决方案1 1 已采纳 2012-06-10 09:48:32

注意

而且还可以触发那些点击事件

解决方案2 0 2012-06-15 14:44:30

解决方案1
1 已采纳 2012-06-10 09:48:32

解决方案2
0 2012-06-15 14:44:30