只执行一次jquery答案

【问题标题】：Execute jquery only once只执行一次jquery
【发布时间】：2013-12-11 18:31:06
【问题描述】：

谁能帮助我，我这里有一个脚本，当你的鼠标离开页面时会显示一个对话框，但我只希望它执行一次，在第一次之后，我不希望它再次发生。这是我的代码：

<html>
<head>
<style>
#dialog {
    width:652px;
    margin-right:auto;
    margin-left:auto;
    display:none;
}
</style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>

function show_image(src, width, height, alt) {
    var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;

    // This next line will just add it to the <body> tag
    document.body.appendChild(img);
}

</script>
<script type="text/javascript">
var count = 0;
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}
addEvent(window,"load",function(e) {
    addEvent(document, "mouseout", function(e) {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;
        if (!from || from.nodeName == "HTML") {
            // stop your drag event here
            // for now we can just use an alert
            if (count < 1) {
              $(function() {
                var count = 1;
                $( "#dialog" ).dialog({
                width:692
                });
                });
            }
        }
    });
});
</script>
</head>
<body>
<div id="dialog">
<img src="http://www.maxcashtitleloans.com/POPUPIMAGE.jpg">
</div>
</body>
</html>

任何帮助都会很棒！谢谢。

【问题讨论】：

更改代码以使用 jQuery 进行事件处理，并使用 .one() 函数仅执行一次处理程序。看起来您也可以在全局范围内而不是在事件处理程序内简单地声明 count。
我无法弄清楚鼠标事件处理的 jquery
您的代码没有引用 jQueryUI 样式表。这对您的问题并不重要，但以后可能很重要（没有它，您的对话将无法工作）。示例见this answer的最后部分。
此代码应该适合您：jsfiddle.net/6c5m7。另外，learn.jquery.com 是一个很好的资源。

标签： jquery dialog

【解决方案1】：

你需要有count = 1;

而不是 var count = 1;（~第 47 行）

和 count = 0; 而不是 var count = 0;（第 29 行）

第 29 行 (var count = 0;) 定义了变量“count”，但在您的代码中不能覆盖或增加 count，因为它不在同一范围内。

【讨论】：

【解决方案2】：

复制/粘贴此代码，看看 ti 是否适合您：

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <link rel="stylesheet" href="/resources/demos/style.css">

        <style>
            #dialog {
                width:652px;
                margin-right:auto;
                margin-left:auto;
                display:none;
            }
        </style>

        <script type="text/javascript">
            $(document).ready(function() {
                var count = 0;

                function show_image(src, width, height, alt) {
                    var img = document.createElement("img");
                    img.src = src;
                    img.width = width;
                    img.height = height;
                    img.alt = alt;

                    // This next line will just add it to the <body> tag
                    document.body.appendChild(img);
                }
                function addEvent(obj, evt, fn) {
                    if (obj.addEventListener) {
                        obj.addEventListener(evt, fn, false);
                    }
                    else if (obj.attachEvent) {
                        obj.attachEvent("on" + evt, fn);
                    }
                }
                addEvent(window,"load",function(e) {
                    addEvent(document, "mouseout", function(e) {
                        e = e ? e : window.event;
                        var from = e.relatedTarget || e.toElement;
                        if (!from || from.nodeName == "HTML") {
                            // stop your drag event here
                            // for now we can just use an alert
                            if (count < 1) {
                                $(function() {
                                    count = 1;
                                    $( "#dialog" ).dialog({
                                        width:692
                                    });
                                });
                            }
                        }
                    });
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="dialog">
        <img src="http://www.maxcashtitleloans.com/POPUPIMAGE.jpg">
    </div>

</body>
</html>

【讨论】：

【解决方案3】：

你有两个选择：

1_Unbind 执行此操作的事件（您需要为此使用 jquery 事件）

$(this).unbind("mouseOut");

2_使用更糟糕的方式并使用这样的标志

var flag=1;
addEvent(window,"load",function(e) {
    addEvent(document, "mouseout", function(e) {
        if(flag){
            flag=0;
            e = e ? e : window.event;
            var from = e.relatedTarget || e.toElement;
            if (!from || from.nodeName == "HTML") {
                // stop your drag event here
                // for now we can just use an alert
                if (count < 1) {
                    $(function() {
                        var count = 1;
                        $( "#dialog" ).dialog({
                            width:692
                        });
                    });
                }
            }
        }
    });
});

【讨论】：