Javascript Jquery函数未正确执行

好的，这是我的代码：

//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\u popup\u crop（url）{}

  不起作用
• 现在调用该函数，因为

  警报（“调用show\u popup\u crop！”）。但它并没有执行代码的其余部分，而这部分代码正是它需要更改图像标记和分割属性的部分
  我尝试过改变这个脚本在JS文件中的位置，但是没有帮助
  

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

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

• 然而，当我包括

  $（'#cropbox'）.attr（'src'，“someurl”）

  在同一JS文件中的另一个

  document.ready

  方法中，它执行代码。我不明白是什么问题
• 将执行index.php页面中调用的所有其他函数

• 然而，更奇怪的是，它没有执行

  $（document）.ready（function（）{…}）中的所有函数
  
  它只是执行第一个函数并停止。。。但是它执行所有其他页面中的所有其他函数
  

---

控制台错误：

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

未捕获类型错误：未定义不是函数

但现在它给了我这个：

未捕获引用错误：未定义jQuery

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

---

注：当chrome被刷新并且js文档被更改时，无论刷新多少次，chrome都会加载旧的js文档。

您是否将所有代码都打包到了浏览器中

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

我有种感觉你的问题与此有关。

---

.ready是jquery加载API并准备使用时引发的事件

将PHP代码更改为：

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

echo'$（window.on（“load”，function（）{window.top.window.show_popup_crop（“.$target_file.”；”；}）；

JavaScript中的结果如下：

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

$（窗口）.on（“加载”，函数（）{
window.top.window.show_popup_crop（“url/to/image.jpg”）；
});

• 代码中发生的情况是，在图像元素

  \cropbox

  完全加载到页面之前调用了

  show\u popup\u crop（）

• 因此，这一行

  $（'#cropbox'）.attr（'src'，url）

  试图更改尚未存在的元素的

  src

  标记。
  当图像元素最终加载时，代码很久以前就试图执行该行（在计算机时代，这一切都发生在一秒钟或更短的时间内），但没有成功。
  所以什么也没发生

什么是

$（window）.on（“load”，function（）{…}）

does，是指等待页面上的所有元素完全加载，然后在其处理函数中执行代码。
这发生在

document.ready

之后。两者之间的区别是什么，以及为什么使用

window.load

特别是对于图像（我总是建议使用它而不是document.ready）很重要

---

现在，这一行

$（'#cropbox'）.attr（'src'，url）仅在页面上加载所有元素（包括图像）后执行。因此图像元素存在，并且可以成功更改源。
要解决缓存问题，请：（1）按F12打开DevTools。（2） 单击设置（右上角的小齿轮）。（3） 在“常规”下，第一个选项是“禁用缓存（当DevTools打开时）”。选中该选项，然后在保持DevTools打开的同时刷新页面。这：
window.top.window.show\u popup\u裁剪（“.$target\u file.”）
不正确。PHP点和引号不应该在那里：
（“.$target\u file.”）
应该是
（“somefile.jpg”）
。。。请检查以确保情况属实。另外，
中的
'Jcrop'
真的应该以大写字母开头吗？通常这些文件名都是小写的。其余的函数不会执行，因为它们从未被调用（至少在您提供的脚本中没有）。这些都是标准函数：
functionnameoffunction（）{}
，这意味着必须在代码中的某个地方调用它们，如下所示：
nameOfFunction（）。对于第一个函数，这发生在PHP添加的脚本中，但对于另一个函数，这永远不会发生。。。例如，您可以在创建函数后立即调用该函数，如下所示：
function crop_photo（）{…}crop_photo（）。我不知道那是否是调用它们的正确时间。。这是你的代码好的，是的，编码部分是正确的，因为我从另一个教程复制了这段代码，它在那里工作。$target_file是一个变量…我知道它是有效的，因为我从教程中复制了这段代码，是的，它在那里工作；然后像这样尝试。我更改了函数，如u所示。并包装了document.ready，但没有运行。我从中复制此内容的代码似乎没有任何问题？非常感谢您注意到
窗口.load
功能。没有它，jQuery就不会执行它的任何原型函数。
$(document).ready(function(){
  //jquery code here
});

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

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