0

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

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

更新

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

4

3 回答 3

1

以您描述的方式这是不可能的，因为 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()

于 2012-05-22T06:52:12.663 回答
0

将您的代码包装在 $(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();

    }
});
于 2012-05-22T06:50:24.940 回答
-1

更新

假设我有两个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>
    ';
}

?>

无论我添加

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

或不。

这看起来像你的情况吗？

于 2012-05-22T06:52:25.503 回答