延迟通过 AJAX 接收的文档中的 JavaScript 执行

deferring JavaScript execution in document received via AJAX

本文关键字：文档 JavaScript 执行 AJAX 延迟      更新时间：2023-09-26

我通过AJAX收到这个HTML文档：

    <form enctype="multipart/form-data" method="POST" action="admin.php?do=media&action=file-upload">
    <div id="uploadForm">
        <div id="fileList">

        </div>
        <a href="#" id="selectFile">[Select File]</a>
        <a href="#" id="uploadFile">[Start Upload]</a>
    </div>
</form>
<script type="text/javascript">
    // $(function(){}); not working when data loaded with ajax request
        var ajaxUpload = new plupload.Uploader({
            runtimes: 'gears, html5, flash',
            url: 'upload.php',
            browse_button: 'selectFile',
        });

        ajaxUpload.bind('Init',function(param){
            console.log(param);
            console.log($('selectFile'));
        });
        $('#uploadFile').click(function(){
            alert('Something');
        });
        ajaxUpload.init();

</script>

当我将其附加到主文档时，其中的 JavaScript 将立即运行，并且无法找到引用的 DOM 元素。

当我在代码上添加超时时，它可以工作，但我想知道实现此目的的更好方法。

更新

修改以反映问题的真实意图。

以您所描述的方式不可能做到这一点，因为 JavaScript 没有绑定到运行条件，因此它会立即运行。

您通过 AJAX 接收的文档内的代码应通过提供端包装在函数中：

function onDocumentReady()
{
    // your code here
}

然后从加载代码：

// get the HTML and JavaScript in data
$('#container').append($(data));
// fire the function to let JavaScript run
onDocumentReady();

如果您有多个请求，则提供方应通过在函数名称中添加随机字母来使onDocumentReady函数唯一，例如 onDocumentReady_123()

将

代码包装在 $(document(.ready 中。这将确保您的 JavaScript 在加载 DOM 之前不会运行，并且您的目标元素将在页面上可用：

$(document).ready(function() {
   var ajaxUpload = new plupload.Uploader({
        runtimes: 'gears, html5, flash',
        url: 'upload.php',
        browse_button: 'selectFile',
    });

    ajaxUpload.bind('Init',function(param){
        console.log(param);
        console.log($('selectFile'));
    });
    $('#uploadFile').click(function(){
        alert('Something');
    });
    ajaxUpload.init();
});

有关其工作原理的更多信息，请参阅 jQuery ready 的文档。该网站还提供了有关其他有用的jQuery命令的信息，这些命令可能会有所帮助，我鼓励您查看并尝试那里的示例。祝你好运！

更新：

如果我理解正确，您会从服务器获得类似以下内容的 HTML：

<!-- Pulled HTML from the server using AJAX -->
<div id="uploadForm">
    <div id="fileList">
    </div>
    <a href="#" id="selectFile">[Select File]</a>
    <a href="#" id="uploadFile">[Start Upload]</a>
</div>

也许尝试将其动态注入其中：

<form action=""> <!-- inject HTML here --> </form>

如果我的理解是正确的，那么这应该允许你注入 HTML，然后只在 AJAX 请求完成并且注入新的 DOM 后运行 JavaScript。请记住，由于我没有您的所有代码，因此这只是一个概念性示例：

$.ajax({ url:"/somepathtoGetData",
    success: function(data) {
        // your HTML is in the variable "data", and this injects the HTML into
          // the form element on the page
        $('form').html( data );
        // now that the DOM elements are loaded from the AJAX request, do your
         // other stuff with the uploader here
        var ajaxUpload = new plupload.Uploader({
            runtimes: 'gears, html5, flash',
            url: 'upload.php',
            browse_button: 'selectFile',
        });

        ajaxUpload.bind('Init',function(param){
            console.log(param);
            console.log($('#selectFile')); // added # for id attr
        });
        $('#uploadFile').click(function(){
            alert('Something');
        });
        ajaxUpload.init();
    }
});

更新

假设我有两个php文件，一个是main.php，有这样的代码：(不包括jQuery src，请添加你自己的(

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $('#b').click(function(){
            $.post("ajax.php",
            {
                taskaction: "getFormAndJs"              
            },
            function(data){
                        $('body').append(data);
                        // $(document).trigger("ready");
            },
            "text");
            })
    });
</script>
<body>
    aaaaaaaaaaaaa
    <input type=button id="b" value="click" />
</body>

另一个是 Ajax.php，像这样： 

<?php
if ($_POST['taskaction'] == 'getFormAndJs') {
    echo '
        <div id="uploadForm">222</div> <input type=button id="a" value="upload" />
        <script>
        $("#a").click(function(){
            alert(123);
        })
        </script>
    ';
}
?>

似乎在我这边工作(单击按钮 a 并提醒"123"(，我是否添加 

$(document).trigger("ready");

或不。

这看起来像你的情况吗？

相关文章：