为什么我的 jQuery 代码不断重复？可能的 .bind 问题？

Question

我已经进行了几个月的编程，并为一个有 API 和 jQuery 的网站到处编写小脚本。最近我一直在为那个网站开发一款迷你 rpg 游戏。不幸的是，我并不是最有经验的人。

我在一些 .bind("click") jQuery 事件中遇到了一些问题，主要是一个不会停止并无休止地重复的奇特事件。我制作了一些按钮，可以在点击时触发更多功能。我有一种感觉，我可能会在 2 个函数之间无休止地重复，因为一些 console.log 消息无休止地重复，使我正在测试代码的选项卡崩溃。我找不到循环的原因。

//#initialFunctions
settingsButton();
menuButton();

//#buttons

function btnCloser(){
  if($('#btn1').length!==0){
    $('#btn1').remove();
    console.log("Btn1 removed.");
  }
  if($('#btn2').length!==0){
    $('#btn2').remove();
    console.log("Btn2 removed.");
  }
  if($('#btn3').length!==0){
    $('#btn3').remove();
    console.log("Btn3 removed.");
  }
}
function buttons3(){
  $('#mainWindow').append('<button id="btn1" type="button" style="position:absolute; top:105px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
  $('#mainWindow').append('<button id="btn2" type="button" style="position:absolute; top:135px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
  $('#mainWindow').append('<button id="btn3" type="button" style="position:absolute; top:165px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;"></button>');
  $('#btn1').hover(function(){$('#btn1').css("cursor","pointer");$('#btn1').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn1').css("cursor","auto");$('#btn1').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
  $('#btn2').hover(function(){$('#btn2').css("cursor","pointer");$('#btn2').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn2').css("cursor","auto");$('#btn2').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
  $('#btn3').hover(function(){$('#btn3').css("cursor","pointer");$('#btn3').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#btn3').css("cursor","auto");$('#btn3').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
}


//#buttonsUI

function menuButton(){
  $('body').append('<button id="menuBtn" type="button" onclick="menu()" style="position:absolute; top:55px; right:500px; width:100px; height:20px; background-color:black; color:white; opacity: 0.8; border-radius:20px; opacity: 0.8; z-index:100; font-size=200%; color:white; text-align:center;">Menu</button>');
  $('#menuBtn').hover(function(){$('#menuBtn').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#menuBtn').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
}

//#menu

maintenanceMode=false;
function menu(){
  $('statWindow').remove();
  if($('#mainWindow').length===0){
    $('body').append('<div id="mainWindow" style="position:absolute; top:90px; right: 355px; height: 200px; width: 250px; background-color: black; border: 2.5px solid #2FC7FB; border-radius: 20px; opacity: .8; z-index: 100;"></div>');
    $('#mainWindow').append('<div id="mainWindowText" style="position:absolute; top:12px; left:3px; text-align:left;"></div>');
    $('body').append('<div id="closeButton" onclick="mainWindowClose()" style="position: absolute; top:96px; right:360px; height:20px; width:20px; background-color:black; color:white; opacity: 0.8; opacity:0.8; z-index:101; font-size=170%; text-align:center; border: 2.5px solid #2FC7FB; border-radius: 10px;">X</div>');
    $('#closeButton').hover(function(){$('#closeButton').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#closeButton').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
  }
  btnCloser();
  buttons3();
  $('#btn1').bind("click",console.log("Stats button clicked.")).text('Stats');
  $('#btn2').bind("click",clinic()).text('Clinic');
  $('#btn3').bind("click",mainWindowClose()).text('Close');
}

//#mainUI

notShown=true;
function newWindow(){
  $('#miniGame').remove();
  notShown=false;
  $('body').append('<div id="mainWindow" style="position:absolute; top:90px; right: 355px; height: 200px; width: 250px; background-color: black; border: 2.5px solid #2FC7FB; border-radius: 20px; opacity: .8; z-index: 100;"></div>');
  $('#mainWindow').append('<div id="mainWindowText" style="position:absolute; top:12px; left:3px; text-align:left;"></div>');
  $('body').append('<div id="closeButton" onclick="mainWindowClose()" style="position: absolute; top:96px; right:360px; height:20px; width:20px; background-color:black; color:white; opacity: 0.8; opacity:0.8; z-index:101; font-size=200%; text-align:center; border: 2.5px solid #2FC7FB; border-radius: 10px;">x</div>');
  $('#closeButton').hover(function(){$('#closeButton').css("cursor","pointer");$('#closeButton').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#closeButton').css("cursor","auto");$('#closeButton').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
  //$('#mainWindow').append('<button id="battleButton" type="button" onclick="clinicText()" style="position:absolute; top:160px; left:2.5px; width:240px; height:30px; background-color:black; color:white; opacity: 0.8; text-align:center;">Battle!</button>');
}
function showAlert(){
  $('body').append('<div id="miniGame" onclick="newWindow()" style="position:absolute; top:55px; right: 350px; height: 20px; width: 20px; background-color: red; border-radius:20px; opacity: 0.8; z-index: 100; font-size=500%; color: solid red; text-align: center;">!</div>');
  $('#miniGame').hover(function(){$('#miniGame').css("cursor","pointer");$('#miniGame').css("box-shadow: 0px 0px 10px 2px #FFFFFF inset;");},function(){$('#miniGame').css("cursor","auto");$('#miniGame').css("box-shadow: 0px 0px 0px 0px #FFFFFF inset;");});
  notShown=false;
  $('#miniGame').bind("click",monsterEncounter());
}
function mainWindowClose(){
  btnCloser();
  $('#mainWindow').remove();
  $('#closeButton').remove();
  notShown=true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

似乎我的代码以某种方式一遍又一遍地重复，我想知道是什么原因。谢谢！

Answer 1

当绑定到一个事件时，你需要提供一个function，它会在事件发生时被执行。你似乎正在传递调用函数的结果。

例如：

$('#btn1').bind("click",console.log("Stats button clicked."))

其实是一样的

var x = console.log("Stats button clicked.");
$('#btn1').on('click', x);

这可能不是你想要的。

试试这个：

$('#btn1').on('click', function () {
    console.log('Stats button clicked.');
});

很可能是您的.hover( 处理程序在无休止地重复。

另外，试着分解你的代码并缩进它。很高兴在一行中看到所有内容，但它很难理解。例如，在您的 hover 函数中，您的 javascript 无效（这可能会在您的控制台中引发错误）