main是整个页面

Question

好的，我这里有一点问题，

    $("#WhoAreWe").click(function(){
    $("#Image").hide();
    $("#Two").slideUp(1000);
    $("#Third").slideUp(1000);
    $("#Fourth").slideUp(1000);
    $("#WhoAreWe").hide();
    $("#WhoAreWe2").slideToggle(3000);
    $("#IDs").slideDown(3000);

        $("#main").click(function(){
    alert("Pressed Back");
});

（警报只是占位符）

基本上#main是整个页面，当按下网站上的任何一点时。它工作正常，但问题是，当我第一次按#WhoAreWe时，它还运行$（＆＃34;＃main＆＃34;）函数。我的问题是每当WhoAreWe被按下时，main也会运行。我不想要这个，我只是希望它在用户点击WhoAreWe后点击页面上的任意位置时运行。

编辑：

为了说清楚，＃WhoAreWe是Div（Text）。

main是整个页面

Answer 1

试试这个例子：

<强>脚本

$(function(){
    $("#main").on('click', function(e) {
        if($(this).hasClass('disabled')) {
            return;
        }
        alert('Its main ....');
    });
    $("#whoAreWe").on('click', function(e) {
        alert('Its Who Are We ....');
        $("#main").removeClass('disabled');
    });
});

<强> HTML

<input type="button" value="Who are we ?" id="whoAreWe" />
<input type="button" value="Main" id="main" class="disabled"/>

<强> 修改

<强>脚本

$(function () {
    $("#main").on('click', function (e) {
        if ($(this).hasClass('disabled')) {
            return;
        }
        alert('Its main ....');
    });
    $("#whoAreWe").on('click', function (e) {
        e.stopPropagation();
        $("#main").removeClass('disabled');
        alert('Its Who Are We ....');
    });
});

<强> HTML

<div id="main" class="disabled">
    <div id="whoAreWe">Who Are We ?</div>
</div>

Answer 2

更新：以前没有全局定义“点击”变量...现在我已将其更改为全局变量......

$(document).ready(function (){

var window.clicked=false;

$("#WhoAreWe").click(function(){
    $("#Image").hide();
    $("#Two").slideUp(1000);
    $("#Third").slideUp(1000);
    $("#Fourth").slideUp(1000);
    $("#WhoAreWe").hide();
    $("#WhoAreWe2").slideToggle(3000);
    $("#IDs").slideDown(3000);

    window.clicked=true;    

});



$("#main").click(function(){
    if(!window.clicked){
        alert("Pressed Back");
    }
});


});

Answer 3

猜这应该也可以正常工作

$(document).ready(function(){
    $('#whoAreWe').on('click', function(){

        $(':not(#whoAreWe)').on('click', function(){
            $('#main').unbind('click').on('click', function(){
                //unbind and bin click to prevent multi bindings
                alert('Pressed Back');
            });
        });
    }); 
});

并注意将它包裹在$(document).ready();中。你应该把所有行动都放在那里。

<强> FIDDLE

<强> DIV-FIDDLE

<强> DIV-FIDDLE waiting

<强> FIDDLE WITH YOUR HTML AS SAMPLE

延迟jQuery .click函数

main是整个页面

3 个答案: