Question

好的，这是我的代码：

//Other Jquery codes


// show_popup_crop : show the crop popup
function show_popup_crop(url) {
    alert("Called show_popup_crop!");
    // change the photo source
    $('#cropbox').attr('src', url);
    // destroy the Jcrop object to create a new one
    try {
        jcrop_api.destroy();
    } catch (e) {
        // object not defined
    }
    // Initialize the Jcrop using the TARGET_W and TARGET_H that initialized before
    $('#cropbox').Jcrop({
        aspectRatio: 1,
        setSelect: [ 100, 100, TARGET_W, TARGET_H ],
        onSelect: updateCoords
    },function(){
        jcrop_api = this;
    });

    // store the current uploaded photo url in a hidden input to use it later
    $('#photo_url').val(url);
    // hide and reset the upload popup
    $('#display_pic_input_first').val('');

    // show the crop popup
    $('#popup_crop').show();
}

// crop_photo :  
function crop_photo() {
    var x_ = $('#x').val();
    var y_ = $('#y').val();
    var w_ = $('#w').val();
    var h_ = $('#h').val();
    var photo_url_ = $('#photo_url').val();

    // hide thecrop  popup
    $('#popup_crop').hide();

    // display the loading texte
    $('.loading').css('display','inherit');
    // crop photo with a php file using ajax call
    $.ajax({
        url: 'crop_photo.php',
        type: 'POST',
        data: {x:x_, y:y_, w:w_, h:h_, photo_url:photo_url_, targ_w:TARGET_W, targ_h:TARGET_H},
        success: function(data){
            // display the croped photo
        }
    });
}

// updateCoords : updates hidden input values after every crop selection
function updateCoords(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
}

//document.ready function calls

发生了什么：

功能show_popup_crop(url){}无法正常工作。
现在正在调用该函数，因为正在执行alert("Called show _popup_crop!");。但它并没有执行代码的其余部分，而是需要更改图像标记和分区属性的部分。
我尝试在JS文件中更改此脚本的位置，但它没有帮助。

PHP代码自动生成包含在正文中的脚本：

<script type="text/javascript">window.top.window.show_popup_crop("some url")</script>

php页面中脚本标记内的PHP代码：

echo '<script type="text/javascript">window.top.window.show_popup_crop("'.$target_file.'")</script>';

现在它在页面加载时调用该函数作为警报功能
alert("Called show_popup_crop!");已执行。实际上它会执行所有包含的警报功能，但它不会执行该方法中包含的任何其他功能。

我已尝试删除其他所有内容，只是执行下面的代码，但它仍然无效：

function show_popup_crop(url) {
    alert("Called show_popup_crop!");
    $('#cropbox').attr('src', url); //change the photo source
    $('#popup_crop').show();
}

但是，当我将$('#cropbox').attr('src', "some url");包含在同一JS文件中的另一个document.ready方法中时，它会执行代码。我不明白这是什么问题。
执行 index.php 页面中调用的所有其他功能。
然而，更奇怪的是，它并没有执行$(document).ready(function(){...});中的所有功能。
它只是执行第一个函数并停止...但它执行所有其他页面中的所有其他功能？

控制台错误：

起初它给了我这个控制台错误：

未捕获的TypeError：undefined不是函数

但现在它给了我这个：

未捕获的ReferenceError：未定义jQuery

标题中包含的文件（其中position.js是文件的名称）：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<script src="js/position.js"></script>

P.S：通常在刷新chrome并更改js文档时，无论刷新多少次，chrome都会加载旧的js文档？

Answer 1

你是否将所有代码都包裹在

中

$(document).ready(function(){
  //jquery code here
});

我觉得你的问题与此有关。 .ready是一个由jquery在其API加载并准备好使用时抛出的事件

Answer 2

将您的PHP代码更改为：

echo '<script type="text/javascript">$(window).on("load",function(){window.top.window.show_popup_crop("'.$target_file.'");});</script>';

JavaScript中的结果将是：

<script type="text/javascript">
    $(window).on("load",function(){
        window.top.window.show_popup_crop("url/to/image.jpg");
    });
</script>

您的代码中发生了什么，是在图像元素show_popup_crop()已完全加载到页面之前调用了#cropbox。
因此，此行$('#cropbox').attr('src', url);尝试更改尚未存在的元素的src标记。
当图像元素最终被加载时，代码很久以前就试图执行该行（在计算机时间内，这一切都发生在一秒或更短时间内）没有任何成功。
所以什么也没发生。

$(window).on("load",function(){...});所做的是等待页面上的所有元素完全加载，然后在其处理函数中执行代码。
这发生在document.ready之后。 Read here这两者之间的区别是什么，以及为什么使用window.load特别重要的是为了图像（我总是建议使用document.ready）。

现在，此行$('#cropbox').attr('src', url);仅在之后执行所有元素（包括图像）已加载到页面上。因此，图像元素存在，并且可以成功更改源。

Jquery函数没有正确执行

2 个答案: