Question

我有一个Java脚本功能，该功能将由发布按钮上的onclick事件触发。然后，该函数检查媒体，如果条件为true，则将触发另一个alertify函数，该函数将警告用户进行“确定”或“取消”选择，如果单击“确定”，它将使用jquery通过click函数发出发布请求。而且，如果单击“取消”，将不会执行任何操作。如果此页面上有媒体，则警报完全不会显示，然后它将检查媒体。问题出在视频上。我正在youtube上上传视频，所以如果我不等到看到youtube的响应并提出发布请求，那么我的视频将会丢失。

这个问题的全部目的是使脚本等待一遍又一遍，直到我看到视频，然后以编程方式发出发布请求。

这是我的按钮：

<style>
    #spinner {
        display: none;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url(assets/images/loadermain.gif) 50% 50% no-repeat rgba(255, 255, 255, .5);
    }
</style>
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.2/build/css/alertify.min.css"/>

<button id="publish_job" class="btn btn-success radius" type="submit" name="jobupdate"
onclick="videomsg();">

<div id="spinner"></div>

这是我的剧本

<script>
    var confirmOpt = true;

    function videomsg() {

        if (confirmOpt && ($(".dz-filename").length ==0)) { //The alert will only be shown if there is no video or no image. If either one exists it will not execute.
            event.preventDefault();
            alertify.confirm('Aloovi', '', function () {
                confirmOpt = false;
                $("#publish_job").click();
                $('#spinner').show();
            }, function () {}).set({
                transition: 'zoom',
                message: 'It is highly recommended to add a photo and/or video describing your project in order to allow the service pro to give a more accurate bid.'
            }).set('labels', {
                ok: 'Publish Now',
                cancel: 'Go Back'
            }).show();
        } else if($(".dz-preview").length >0){
            $('#spinner').show();
            event.preventDefault();

            var waitForEl = function (selector, callback) {
                if (jQuery(selector).length) {
                    callback();
                } else {
                    setTimeout(function () {
                        waitForEl(selector, callback);
                    }, 100);
                }
            };

            if ($(".dz-file-preview").length > 0) {
                console.log('uploading video ....');
                var selector = ".embed-responsive"
                waitForEl(selector, function () {
                    // work the magic
                    console.log('found it submit with vid');
                    $("#publish_job").click();

                });
            } else {
                console.log('sumbit with nv only pic')
                $("#publish_job").click();
            }
            //----------
        }
        else{
            console.log('submitting the job without videos and picture');
        }
    }
</script>
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.11.2/build/alertify.min.js"></script>

我已经尝试了很多关于堆栈溢出的解决方案，例如Set Interval和clear Interval，但是它们不是此应用程序的理想解决方案，并且Opera mini不支持set interval和clear interval。

当我运行此脚本时，会在控制台日志中得到它：

uploading video ....
VM33958:41 found it submit with vid
VM33958:24 Uncaught TypeError: Cannot read property 'preventDefault' of undefined
    at videomsg (eval at <anonymous> (jquery.min.js:2), <anonymous>:24:19)
    at HTMLButtonElement.onclick (index.php?page=postajob:1)
    at Object.trigger (jquery.min.js:3)
    at HTMLButtonElement.<anonymous> (jquery.min.js:3)
    at Function.each (jquery.min.js:2)
    at n.fn.init.each (jquery.min.js:2)
    at n.fn.init.trigger (jquery.min.js:3)
    at n.fn.init.n.fn.(/anonymous function) [as click] (http://aloovi.test/assets/js/jquery.min.js:4:15584)
    at eval (eval at <anonymous> (jquery.min.js:2), <anonymous>:42:39)
    at waitForEl (eval at <anonymous> (jquery.min.js:2), <anonymous>:28:21)

我只是尝试将事件传递给函数

onclick="videomsg(event);"

并将功能定义更改为

function videomsg(ev) {.... 并改变了 event.preventDefault(); to ev.preventDefault(); 在功能定义中，我在控制台上有以下输出

VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid
VM34644:36 uploading video ....
VM34644:40 found it submit with vid

但是

$("#publish_job").click(); 根本不执行

Answer 1

我通过添加

解决了这个问题

id="descfrm" 到我的表单和

if ($(".dz-file-preview").length > 0) {
                console.log('uploading video ....');
                var selector = ".embed-responsive"
                waitForEl(selector, function () {
                    // work the magic
                    console.log('found it submit with vid');
                    var additionalinput = $("<input>").attr("type", "hidden").attr("name", "jobupdate");
                    $('#descfrm').append(additionalinput).submit();

                });
            } else {
                console.log('sumbit with nv only pic')
                var additionalinput = $("<input>").attr("type", "hidden").attr("name", "jobupdate");
                $('#descfrm').append(additionalinput).submit();
            }

如果有比此更好的解决方案，请发布您的答案，我非常感谢带有详细说明的干净代码。谢谢Stack溢出社区。

Javascript函数不会一次又一次停止自我调用

1 个答案: