Question

我通过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元素。

当我在代码上添加超时时它会起作用，但我想知道更好的方法来实现这一点。

更新

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

Answer 1

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

您通过AJAX接收的文档中的代码应该通过提供side：

包装在函数中

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()

Answer 2

将代码包装在$（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请求完成后才运行JavaScript，并且已经注入了新的DOM。请记住，由于我没有您的所有代码，这只是一个概念性示例：

$.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();

    }
});

Answer 3

<强>更新

说我有两个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");

是不是。

这看起来像你的情况吗？

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

3 个答案: