從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