javascript - 单击按钮时事件处理程序不起作用-6ren

javascript - 单击按钮时事件处理程序不起作用

转载作者：行者123 更新时间：2023-12-03 01:30:30

在我工作的网站上，我希望用户滚动并单击图标来“打开”它们。例如，如果用户单击“关于我们”图标，它将有一段信息，他们可以在其中向上滚动并打开它们。沿着后退按钮向下移动文本。虽然当我单击后退按钮时我无法触发操作。我用 JQuery 添加了一个按钮，并添加了一个事件处理程序，按下按钮时触发一个操作，我添加了一个 id 和一个类(出于 CSS 原因)，但没有任何效果。

HTML

<script     
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<head>
  <title>Underscores</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://cdn.jsdelivr.net/npm/jquery-    
slotmachine@4.0.0/dist/jquery.slotmachine.min.css">
  </style>
  <script     
src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js">
  </script>
  <script     
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
</head>
<body>
  <div id="left" class="left">
    <img src="https://s3.amazonaws.com/underscores.xyz/images/left.png"     
alt="">
  </div>

  <div class="middle" id="theMiddle" style="width: 400px; height: 300px">
<div><img 
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png" alt=""     

class="icons" id="aboutID"></div>
<div><img 
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/job.png" alt="" 
class="icons" id="jobID"></div>
<div><img 
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/middle.png" 
alt="" class="icons" id="middleID"></div>
  </div>

  <div id="right" class="right"><img 
src="https://s3.amazonaws.com/underscores.xyz/images/right.png" alt=""></div>

  <script src="https://cdn.jsdelivr.net/npm/jquery-
slotmachine@4.0.0/dist/slotmachine.min.js"></script>
  <script src="back.js" charset="utf-8"></script>

CSS:

.box{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 4px;
  display: inline-block;

}

div.left {
  position: absolute;
  left: 390px;
}

div.middle {
  position: absolute;
  left: 490px;
  top: 150px;
}

div.right {
  position: absolute;
  left: 870px;
}

#left,#right{
  width: 290px;
  float: left;
}

#middle{
  width: auto;
  float: left;
}
#theMiddle{
  left: 490px;
  top: 150px;
}
#foo {
  position: absolute;
  height: 300px;
  width: 400px;
  left: 490px;
  top: 150px;
  overflow-y: scroll
}

.backButton{
  position: absolute;
  height: 20px;
  width: 70px;
  left: 490px;
  top: 140px;
}

document.body.style.overflow = "hidden";
//the key strokes for the up and down keys

// Set up our container
const el = document.querySelector("#theMiddle");
// Create new SlotMachine
const slot = new SlotMachine(el, {});


document.onkeydown = checkKey;
function checkKey(e) {
  e = e || window.event;
  //Secret Code: EADWEARD
  anime({
targets: "div.right",
translateX: {
  value: 200,
  duration: 500
    }
  });
  anime({
targets: "div.left",
translateX: {
  value: -200,
  duration: 500
    }
  });

  if (e.keyCode == "40") {
    //this is down
//this will open it up
slot.prev();

  } else if (e.keyCode == "38") {
    slot.next();
  }
}

//Scroll detection occurs here, without the scrollbar
$("html").on("mousewheel", function(e) {
  anime({
    targets: "div.right",
translateX: {
  value: 200,
  duration: 500
    }
  });
  anime({
targets: "div.left",
translateX: {
  value: -200,
  duration: 500
    }
  });
  var delta = e.originalEvent.wheelDelta;
  if (delta < 0) {
//This is for the scrolling down
// animation opens up the brakets

slot.prev();

  }
      if (delta > 0) {
    slot.next();
  }
});


//this is for detecting clicks  for the divs in the middle div
// 1 = the 2nd image , 2 = the  3rd image
$(".middle div").click(function(){
  if($(this).index() == '1'){
console.log("the fucks");

$('#aboutID').fadeOut("slow", function(){
var div = $("<p id='foo'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                                                                             </p> ").hide();
//var but = $("<button id='secondbutton'>Second button</button>");
$('#theMiddle').replaceWith(div);
$('#foo').fadeIn("slow");
//$('#theMiddle').append("<button id='secondbutton'>Second button</button>");
var btn = document.createElement("BUTTON");        // Create a <button> element
btn.className = 'backButton';
btn.id ='backButtonID';
var text = document.createTextNode("Back");        // Create a text node
btn.appendChild(text);                             // Append the text to 
<button>
document.body.appendChild(btn);                    // Append <button> to             
<body>
});


  }if($(this).index() == '2'){
    console.log("jobs page");
  }
});

$(document).ready(function() {
  $("#backButtonID").click(function(){
    console.log("lol");
  });
});

最佳答案

您可以在后退按钮实际存在于网页上之前定义后退按钮的事件处理程序。因为您在单击“.middle div”时动态构建后退按钮，所以事件处理程序的定义需要在此之后发生才能正常工作。试试这个代码片段

$(".middle div").click(function(){
    if($(this).index() == '1'){
    console.log("the fucks");

    $('#aboutID').fadeOut("slow", function(){
        var div = $("<p id='foo'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                                                                             </p> ").hide();
        //var but = $("<button id='secondbutton'>Second button</button>");
        $('#theMiddle').replaceWith(div);
        $('#foo').fadeIn("slow");
        //$('#theMiddle').append("<button id='secondbutton'>Second button</button>");
        var btn = document.createElement("button");        // Create a <button> element
        btn.className = 'backButton';
        btn.id ='backButtonID';
        var text = document.createTextNode("Back");        // Create a text node
        btn.appendChild(text);                             // Append the text to 
        document.body.appendChild(btn);

        //Define the event handler here after the btn has been created
        $("#backButtonID").click(function(){
            console.log("lol");
        });
                              

    });


      }if($(this).index() == '2'){
        console.log("jobs page");
      }
});

.box{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 4px;
  display: inline-block;

}

div.left {
  position: absolute;
  left: 390px;
}

div.middle {
  position: absolute;
  left: 490px;
  top: 150px;
}

div.right {
  position: absolute;
  left: 870px;
}

#left,#right{
  width: 290px;
  float: left;
}

#middle{
  width: auto;
  float: left;
}
#theMiddle{
  left: 490px;
  top: 150px;
}
#foo {
  position: absolute;
  height: 300px;
  width: 400px;
  left: 490px;
  top: 150px;
  overflow-y: scroll
}

.backButton{
  position: absolute;
  height: 20px;
  width: 70px;
  left: 490px;
  top: 140px;
}

<script     
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<head>
  <title>Underscores</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://cdn.jsdelivr.net/npm/jquery-    
slotmachine@4.0.0/dist/jquery.slotmachine.min.css">

  <script     src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js">
  </script>
  <script     src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
</head>
<body>
  <div id="left" class="left">
    <img src="https://s3.amazonaws.com/underscores.xyz/images/left.png"     
alt="">
  </div>

  <div class="middle" id="theMiddle" style="width: 400px; height: 300px">
<div><img 
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/About.png" alt=""     

class="icons" id="aboutID"></div>
<div><img 
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/job.png" alt="" 
class="icons" id="jobID"></div>
<div><img 
src="https://s3.amazonaws.com/underscores.xyz/selectionIcon/middle.png" 
alt="" class="icons" id="middleID"></div>
  </div>

  <div id="right" class="right"><img 
src="https://s3.amazonaws.com/underscores.xyz/images/right.png" alt=""></div>

  <script src="https://cdn.jsdelivr.net/npm/jquery-
slotmachine@4.0.0/dist/slotmachine.min.js"></script>

关于javascript - 单击按钮时事件处理程序不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51333947/

文章推荐： javascript - Chart Js 减少 X 轴上标签的文本大小

文章推荐： javascript - 如何在移动设备上触发 Mousedown/Mouseup？

文章推荐： javascript - chrome 扩展后台、js 到 content.js 之间的消息传递

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 单击按钮时事件处理程序不起作用