为什么我的脚本无法在 AJAX 刷新时运行？

Question

我正在为我的项目开发一个头像上传器。到目前为止一切都很好，今天早上我没有遇到任何问题。过了一会儿，轰隆隆。死亡和毁灭。非常悲伤。当我第一次选择一个文件时，它会立即弹出裁剪工具，并且工作正常。如果我尝试上传不同的文件，裁剪工具就会消失，甚至不会显示图像的预览。我的系统如何运作？我使用 Laravel 框架作为后端，并使用 Laravel Livewire 包作为前端功能。Livewire 允许我用 PHP 编写类似 Vue 的组件。这是我正在处理的表格。每次 Livewire 在输入中看到新文件时，该组件都会刷新。<label for="image-upload">    <div class="w-full mt-4 button"><i class="far fa-fw fa-upload"></i> Drag and drop, or <b>browse</b></div></label><input id="image-upload" type="file" wire:model="image" class="hidden" accept="image/png, image/gif, image/jpeg">@if($image)    <div id="avatar-preview" class="w-full" style="height: 300px;"></div>    <script>        new Croppie(document.querySelector('#avatar-preview'), {            viewport: { width: 200, height: 200, type: 'circle' },            enforceBoundary: true,        }).bind('{!! $image->temporaryUrl() !!}');    </script>    <button type="submit" class="w-full mt-16 button is-green">Submit new avatar</button>@endif我使用 Croppie JS 包作为裁剪工具。它要求我要么向它传递一个img它将附加到的元素，要么向它传递一个适合的容器。我选择了一个容器，这样我就可以控制裁剪工具的大小。当我将图像上传到输入时，Livewire 将获取图像，验证它是图像并且不传递特定大小，然后将图像上传到临时目录。回$image->temporaryUrl()显该临时文件的路径。当文件上传完成并且临时图像准备就绪时，Livewire 通过 AJAX 仅刷新组件。此时，我尝试创建一个新的 Croppie 实例，将其附加到我的预览容器，并将临时图像绑定到它。这适用于第一个文件上传！然后，当我尝试更改文件（就像用户可能的那样）时，整个实例都会消失。我尝试检查再次实例化 Croppie 是否存在问题，因为在我看来，如果刷新该组件，创建该工具的新实例应该不是问题。<script>    if (typeof crop === 'undefined') {        console.log('crop undefined');        let crop = new Croppie(document.querySelector('#avatar-preview'), {            viewport: { width: 200, height: 200, type: 'circle' },            enforceBoundary: true,        }).bind('{!! $image->temporaryUrl() !!}');    } else {        console.log('crop defined');        crop.bind('{!! $image->temporaryUrl() !!}');    }    console.log('crop finished');</script>第一次上传时会出现“未定义”和“完成”日志，但刷新时不会发生任何情况。所以我也测试了这样做......@if($image)    <img src="{{ $image->temporaryUrl() }}">@endif至少要确保预览正常工作，你瞧，它确实如此！最大的问题是，即使 Croppie 不刷新，也不会出现错误或警告。它似乎根本不执行<script>标签中的内容。有什么建议或建议吗？

Answer 1

进一步阅读后，Livewire 似乎可以从组件类中发出可由 JavaScript 拾取的“事件”。我的问题是由更改 DOM 内容的自然行为引起的.innerHtml。

在我的组件类中，在updated()处理输入更新时要执行的操作的函数中，我添加了

$this->emit('avatar_preview_updated', $this->image->temporaryUrl());

然后我将此侦听器添加到我的页面的全局 JS 中：

livewire.on('avatar_preview_updated', image => {

    new Croppie(document.querySelector('#avatar-preview'), {

        url: image,

        viewport: { width: 200, height: 200, type: 'circle' },

        boundary: { height: 300 },

        enforceBoundary: true,

    });

});

这会产生所需的结果。