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

时间：2018-07-13 23:25:29

标签： javascript jquery

在正在运行的网站上，我希望用户滚动并单击图标以“打开”它们。例如，如果用户单击“关于我们”图标，则会有一段信息可以在其中滚动并下文字以及后退按钮。虽然当我单击后退按钮时我无法触发动作。我已经用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;
}

JS 

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");
  });
});

1 个答案:

答案 0 :(得分：1)

您需要在后退按钮实际存在于网页上之前为后退按钮定义事件处理程序。因为单击“ .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>

相关问题
最新问题