Question

我左边有一个菜单，所有元素都有相同的类。我添加了事件$('.menuitem').click并尝试了其他几个选项，甚至根据div id调用事件但没有成功。

由于浏览器控制台上没有任何错误消息，我在搜索错误时迷失了方向。如果你能帮助我找出问题所在，我感激不尽。

HTML：

 <div class='mainwindow'> 
        <div class='menupane'>
            <div id='entity' class='menuitem'><p class='glyphicon glyphicon-triangle-right'>ENTITIES</p></div>
            <div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>COURSES</p></div>
            <div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>STUDENTS</p></div>
            <div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>CLASSES</p></div>
            <div class='menuitem'></div>
        </div>

        <div class='contentpane'></div>
    </div>

DOM：

$(document).ready(function(){
    console.log("loaded");

    $('.menuitem').click(function(){
        console.log("CLICKED 1");
    });

    $('#entity').click(function(){
        console.log("CLICKED 2");
    });
    $('.menupane').on('click', '.menuitem', function(){
        console.log('CLICKED 3');
    });


});

正如您所看到的，我尝试通过几种方法添加click事件，但我没有得到它。非常感谢您的帮助。

Answer 1

否定for (i in seq(1,1128,12)){ Array <- ncvar_get(temp_cont, varid = "TREFHT", start = c(1,1,1,i), count= c(144,96,60,12)) myArray <- array(Array, dim =c(144, 96, 60, 12)) Annual <- apply(myArray, c(1,2,3), mean) myArray2 <- array(Annual, dim = c(144,96,60)) Annuallat <- apply(myArray2, c(2,3), mean) myArray3 <- array(Annuallat, dim = c(96,60)) AnnualGLobal <- apply(myArray3, 2,mean) AnnualGlobalc <- AnnualGLobal - 273.15 write.csv(AnnualGlobalc, file = "year[i].csv") }不会让事件在元素上发送。

z-index

$(document).ready(function() {
  console.log("loaded");
  $('.menuitem').click(function() {
    console.log("CLICKED 1");
  });
  $('#entity').click(function() {
    console.log("CLICKED 2");
  });
  $('.menupane').on('click', '.menuitem', function() {
    console.log('CLICKED 3');
  });
});

.header {
  position: absolute;
  background-color: #525252;
  height: 5%;
  width: 100%;
  min-height: 30px;
  display: block;
  margin: 0;
  z-index: 0;
  font-weight: 700;
  line-height: 175%;
  font-size: 1.4em;
  text-align: center;
  color: #FFFFFF;
  display: inline-block
}
.mainwindow .menupane {
  position: relative;
  display: inline-block;
  width: 25%;
  min-width: 200px;
  background-color: #FFFFFF;
  margin: 0;
  box-shadow: 1px 0px 10px -0px #F5F5F5;
  //z-index: -1;
  padding-top: 40px;
}
.mainwindow .contentpane {
  position: relative;
  display: inline-block;
  width: 100%;
  background-color: #FFFFFF;
  margin: 0;
  //z-index: -2;
  padding-top: 40px;
}
.menuitem {
  background-color: #525252;
  position: relative;
  width: 75%;
  height: 1.5em;
  min-height: 10px;
  border-radius: 0.65em;
  margin: 7.5%;
  color: lightgray;
  /*font-size: 0.8vw;*/
  /*line-height: 1.5em;*/
  padding-left: 10%;
  border: 0.05em solid lightgray;
  /*box-shadow: 0px 0px 1px 1px gray;*/
}
glyphicon-triangle-right {
  transition: transform 180ms ease-in;
}
glyphicon-triangle-right.rotate90 {
  transform: rotate(90deg);
  transition: transform 180ms ease-in;
}

Fiddle Demo

Answer 2

您的z-index CSS导致了问题。这是一个没有这些的更新示例，因此您可以从那里进行修复：https://jsfiddle.net/zxgkprw9/1/

Answer 3

您的问题不是事件的约束，而是 .mainwindow .menupane 这个属性位置：相对;

事件被正确添加但是由于这个类，元素的实际位置是不同的。删除此属性，一切正常

jsfiddle：https://jsfiddle.net/zxgkprw9/3/

.mainwindow .menupane{

display: inline-block;
width: 25%;
min-width: 200px;
background-color: #FFFFFF;
margin: 0;
box-shadow: 1px 0px 10px -0px #F5F5F5;
z-index: -1;
padding-top: 40px;
}

jQuery单击事件不起作用

3 个答案:

Fiddle Demo