Question

如何在动态嵌入的网页/内容中使用或正确使用javascript？

当事件发生时，我将PHP / HTML页面加载到HTML元素中。 javascript在outter页面或内容加载到的页面上工作正常，但它在正在加载的页面上不起作用。

这是我的请求功能：

function sendServiceRequest(file, nvpSendData, successCallback, failCallback) {
    $.ajax({
        type: "POST",
        url: file,
        data: nvpSendData,
        dataType: 'html'
    }).success(function(data, status) {
        console.log(".done");
        console.log("Return AJAX status: " + status);
        //console.log("success data: " + JSON.stringify(data));
        successCallback(data, status);
    }).fail(function(data, status, error) {
        console.log(".fail");
        console.log("Return AJAX status: " + status);
        //console.log("Return data: " + JSON.stringify(data));
        failCallback(data, status, error);
    });
}

然后我有一个php页面， viewScripts.php ，包含这个javascript文件，处理加载过程

view_events.js

document.addEventListener('DOMContentLoaded', function() {
    var rx = document.querySelector("#rx-number").value;
    sendServiceRequest(
        "/comments/get_content.php",
        {action:"loadContent", loadType:"comments", rx_number:rx},
        function(data, status) {
            document.querySelector("#rx-comments-container").innerHTML = data;
        },
        function(data, status, error) {
            console.log("AJAX send service request failed while loading comments!");
        }
    );
});

然后在上面的代码中， /comments/get_content.php 验证正在发送的数据，然后将页面 comment.php 加载到div元素中，＃RX-评论容器。到目前为止一切都很好。这是 comment.php 中的javascript，它不想工作。我尝试将包含指定函数的'.js'文件包含到 comment.php 中处理事件，但这不起作用。我还尝试将事件函数包含在 view_events.js 中，如上所列，它包含在 viewScripts.php 中，这也不想工作。我也尝试将javascript直接嵌入到 comments.php 中，但这也不起作用。

以下是 comments.php 中包含的javascript：

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName("edit-rx-comment-glyph").addEventListener("click", function () {
        var id = this.value;
        sendServiceRequest(
            "/comments/get_content.php",
            {action: "loadContent", loadType: "editComment", comment_id: id},
            function (data, status) {
                document.querySelector('#' + id).innerHTML = data;
            },
            function (data, status, error) {
                console.log("AJAX send service request failed while loading edit form!");
            }
        );
    });

    document.getElementsByClassName("comment-history-glyph").addEventListener("click", function () {
        var id = this.value;
        sendServiceRequest(
            "/comments/get_content.php",
            {action: "loadContent", loadType: "viewHistory", comment_id: id},
            function (data, status) {
                document.querySelector('#comments-body').innerHTML = data;
            },
            function (data, status, error) {
                console.log("AJAX send service request failed while loading edit form!");
            }
        );
    });
});

Answer 1

我设法解决了这个问题。我想我做错了，因为我的代码最终工作了。我刚刚使用了sendServiceRequest函数的onclick事件，最终工作了。我不需要包含任何其他js文件。

在动态嵌入HTML中使用Javascript？

1 个答案: