Ajax、php输出、iframes和JCrop

由于兼容性，我已经用iframe实现了一个AJAX上传，但是我现在尝试将AJAX上传返回的结果与

jcrop

绑定，因为结果是在之后加载的

PHP输出的格式如下：

<img src="upload/'.$new_name.'" id="cropbox" />

            <!-- This is the form that our event handler fills -->
            <form action="crop.php" method="post" onsubmit="return checkCoords();">
                <input type="hidden" id="x" name="x" />
                <input type="hidden" id="y" name="y" />
                <input type="hidden" id="w" name="w" />
                <input type="hidden" id="h" name="h" />
                <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />
            </form>

---

有人能告诉我为什么js没有与图像绑定吗？或者提供任何建议？

问题在于上传图像时js脚本。js函数试图绑定到不存在的id，这就是js脚本无法运行的原因。上面文件中的js必须在加载到映像的末尾放入js函数，因此在加载映像之后，jquery将id绑定到jcrop

旧剧本

<script type="text/javascript">

    $(document).ready(function () {

        $("#formsubmit").click(function (event) {
            event.preventDefault();
            var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none" />');

            $("body").append(iframe);

            var form = $('#theuploadform');
            form.attr("action", "uploader.php");
            form.attr("method", "post");
            form.attr("enctype", "multipart/form-data");
            form.attr("encoding", "multipart/form-data");
            form.attr("target", "postiframe");
            form.attr("file", $('#userfile').val());
            form.submit();

            $("#postiframe").load(function () {
                iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
                $("#textarea").html(iframeContents);
                $("#postiframe").remove();
                $(document).find('#postiframe').remove();
            });


        });

    });
</script> 
<script type="text/javascript">
$(function(){

    $('#cropbox').Jcrop({
      aspectRatio: 1,
      onSelect: updateCoords
    });

  });

  function updateCoords(c)
  {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };

  function checkCoords()
  {
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
  };
</script>

$（文档）.ready（函数（）{
$（“#表单提交”）。单击（函数（事件）{
event.preventDefault（）；
变量iframe=$（''）；
$（“正文”）。附加（iframe）；
变量形式=$（“#上传形式”）；
attr（“action”，“uploader.php”）；
表格attr（“方法”、“职位”）；
form.attr（“enctype”、“多部分/表单数据”）；
attr（“编码”、“多部分/表单数据”）；
表格attr（“目标”、“后框架”）；
form.attr（“file”，$（'#userfile'）.val（）；
表单提交（）；
$（“#positframe”）.load（函数（）{
iframeContents=$（“#PostFrame”）[0].contentWindow.document.body.innerHTML；
$（“#textarea”）.html（iframeContents）；
$（“#positframe”）.remove（）；
$（文档）。查找（“#positframe”）.remove（）；
});
});
});
$（函数（）{
$（'#cropbox'）.Jcrop({
方面：1，
onSelect:updateWord
});
});
函数updateCoords（c）
{
$（'#x'）.val（c.x）；
$（'y'）.val（c.y）；
$（'w'）.val（c.w）；
$（'h'）.val（c.h）；
};
函数checkCoords（）
{
if（parseInt（$（'#w'）.val（））返回true；
警报（'请选择作物区域，然后按提交'）；
返回false；
};

变成：

<script type="text/javascript">

    $(document).ready(function () {

        $("#formsubmit").click(function (event) {
            event.preventDefault();
            var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none" />');

            $("body").append(iframe);

            var form = $('#theuploadform');
            form.attr("action", "uploader.php");
            form.attr("method", "post");
            form.attr("enctype", "multipart/form-data");
            form.attr("encoding", "multipart/form-data");
            form.attr("target", "postiframe");
            form.attr("file", $('#userfile').val());
            form.submit();

            $("#postiframe").load(function () {
                iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
                $("#textarea").html(iframeContents);
                $("#postiframe").remove();
                $(document).find('#postiframe').remove();

                //attempt at joining
                $(function(){

                    $('#cropbox').Jcrop({
                      aspectRatio: 1,
                      onSelect: updateCoords
                    });

                  });

                  function updateCoords(c)
                  {
                    $('#x').val(c.x);
                    $('#y').val(c.y);
                    $('#w').val(c.w);
                    $('#h').val(c.h);
                  };

                  function checkCoords()
                  {
                    if (parseInt($('#w').val())) return true;
                    alert('Please select a crop region then press submit.');
                    return false;
                  };
            });


        });

    });
</script>

$（文档）.ready（函数（）{
$（“#表单提交”）。单击（函数（事件）{
event.preventDefault（）；
变量iframe=$（''）；
$（“正文”）。附加（iframe）；
变量形式=$（“#上传形式”）；
attr（“action”，“uploader.php”）；
表格attr（“方法”、“职位”）；
form.attr（“enctype”、“多部分/表单数据”）；
attr（“编码”、“多部分/表单数据”）；
表格attr（“目标”、“后框架”）；
form.attr（“file”，$（'#userfile'）.val（）；
表单提交（）；
$（“#positframe”）.load（函数（）{
iframeContents=$（“#PostFrame”）[0].contentWindow.document.body.innerHTML；
$（“#textarea”）.html（iframeContents）；
$（“#positframe”）.remove（）；
$（文档）。查找（“#positframe”）.remove（）；
//企图加入
$（函数（）{
$（'#cropbox'）.Jcrop({
方面：1，
onSelect:updateWord
});
});
函数updateCoords（c）
{
$（'#x'）.val（c.x）；
$（'y'）.val（c.y）；
$（'w'）.val（c.w）；
$（'h'）.val（c.h）；
};
函数checkCoords（）
{
if（parseInt（$（'#w'）.val（））返回true；
警报（'请选择作物区域，然后按提交'）；
返回false；
};
});
});
});

<script type="text/javascript">

    $(document).ready(function () {

        $("#formsubmit").click(function (event) {
            event.preventDefault();
            var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none" />');

            $("body").append(iframe);

            var form = $('#theuploadform');
            form.attr("action", "uploader.php");
            form.attr("method", "post");
            form.attr("enctype", "multipart/form-data");
            form.attr("encoding", "multipart/form-data");
            form.attr("target", "postiframe");
            form.attr("file", $('#userfile').val());
            form.submit();

            $("#postiframe").load(function () {
                iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
                $("#textarea").html(iframeContents);
                $("#postiframe").remove();
                $(document).find('#postiframe').remove();

                //attempt at joining
                $(function(){

                    $('#cropbox').Jcrop({
                      aspectRatio: 1,
                      onSelect: updateCoords
                    });

                  });

                  function updateCoords(c)
                  {
                    $('#x').val(c.x);
                    $('#y').val(c.y);
                    $('#w').val(c.w);
                    $('#h').val(c.h);
                  };

                  function checkCoords()
                  {
                    if (parseInt($('#w').val())) return true;
                    alert('Please select a crop region then press submit.');
                    return false;
                  };
            });


        });

    });
</script>