Jquery 单击 function 不工作。 我点击孩子 jquery 认为我点击了父母
[英]Jquery click function not working. I click child jquery think I clicked parent
问题描述
Hi!
你好！ (Sorry I have bad english skills.) （对不起，我英语不好。）
I got a problem with jquery.我遇到了 jquery 的问题。 I created lot of child divs in parent div.我在父 div 中创建了很多子 div。 All divs positioned, parent div is absolute, child divs are relative.所有 div 定位，父 div 是绝对的，子 div 是相对的。 Parent div z-index is 400, child divs are 500. When I clicked any child div then jquery detect parent div with clicked function.父 div z-index 为 400，子 div 为 500。当我单击任何子 div 时，jquery 通过单击 function 检测父 div。 I don't understand why isn't working these codes.我不明白为什么这些代码不起作用。 So I hope anyone can help me this situation.所以我希望任何人都可以帮助我解决这种情况。
Parent div ID: "#cardslayer"父 div ID：“#cardslayer”
Child divs class: ".cardinlayer"子 div class：“.cardinlayer”
-HTML: -HTML：
<body>
<div id="cardslayer"></div>
</body>
-CSS: -CSS：
#cardslayer {
position: absolute;
width: 960px;
height: auto;
top: 0;
left: 0;
z-index: 400;
display: none;
}
.cardinlayer {
width: 100px;
height: 125px;
margin: 10px;
position: relative;
z-index: 500;
display: none;
}
-JQUERY: (And some style in css with jquery function.) -JQUERY：（以及 css 和 jquery function 中的一些样式。）
var hazakstr = "";
var i = 0;
$("#button").click(function(){
hazakstr = "<center>";
for(i=0; i<22; i++) {
if(level_owner[i] == -1) {
hazakstr = hazakstr + "<div class='cardinlayer' id='house" + i + "' style='background: url(../houses/" + i + ".png); background-size: 100px 125px; background-repeat: no-repeat;'></div>";
}
}
hazakstr = hazakstr + "</center>";
$("#cardslayer").css("display", "block");
$("#cardslayer").html(hazakstr);
$(".cardinlayer").css("display", "inline-block");
i=((567 - $("#cardslayer").height()) / 2);
$("#cardslayer").css("height", 567 - i + "px");
$("#cardslayer").css("padding-top", i + "px");
});
Added html to #cardslayer when loop is ended.循环结束时将 html 添加到#cardslayer。 Code like this:像这样的代码：
HTML: HTML：
<div id="cardslayer" style="display: block; height: 507px; padding-top: 60px;">
<center>
<div class="cardinlayer" id="house0" style="background: url("../houses/0.png") 0% 0% / 100px 125px no-repeat; display: inline-block;"></div>
<div class="cardinlayer" id="house1" style="background: url("../houses/1.png") 0% 0% / 100px 125px no-repeat; display: inline-block;"></div>
.
.
.
.
<div class="cardinlayer" id="house21" style="background: url("../houses/21.png") 0% 0% / 100px 125px no-repeat; display: inline-block;"></div>
</center>
</div>
So after all, I created click function for.cardinlayer.所以毕竟我为.cardinlayer创建了click function。 And its not working.它不工作。
$(".cardinlayer").click(function(){
alert("Cardinlayer");
});
I tried this click function for.cardinlayer我试过这个点击 function for.cardinlayer
$("div").click(function(){
alert($(this).attr("id"));
});
When I clicked one.cardinlayer return value is #cardslayer, not #house1 or any #house.当我单击 one.cardinlayer 时，返回值为#cardslayer，而不是#house1 或任何#house。
#cardslayer is parent and.cardinlayer(s) are childs. #cardslayer 是父级，.cardinlayer(s) 是子级。
Picture of the problem: https://i.imgur.com/DjWcIKK.jpg问题图片： https://i.imgur.com/DjWcIKK.jpg
Red is parent, blue are childs.红色是父母，蓝色是孩子。 So when I click any card jquery is not detect.因此，当我单击任何卡 jquery 时未检测到。 Jquery think I clicked the faded black background. Jquery 认为我点击了褪色的黑色背景。 (parent). （父母）。
I hope anyone can help me.我希望任何人都可以帮助我。 Have a nice day, and thanks.祝你有美好的一天，谢谢。
1 个解决方案
解决方案1
0 2022-01-04 20:04:36
There are modifiers to the click event, like stopPropagation or preventDefault . click事件有一些修饰符，例如stopPropagation或preventDefault 。 (More info: Event on MDN ) （更多信息： MDN 上的活动）
To see it in action:要查看它的实际效果：
let hazakstr = ""; const cardHtml = ({ i }) => { return ` <div id="house${i}" class="cardinlayer" data-idx="${i}" > HOUSE ${i} </div> ` } jQuery("#button").on('click', function() { for (let i = 0; i < 22; i++) { hazakstr += cardHtml({ i }) } $("#cardslayer").html(hazakstr); }); jQuery("#cardslayer").on('click', '.cardinlayer', function(e) { e.stopPropagation() // this stops the event from propagation const { idx } = $(this).data() alert(`Clicked house card: ${idx}`) })
.container { position: relative; } #cardslayer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.cardinlayer { display: flex; justify-content: center; align-items: center; height: 125px; padding: 8px 16px; background-color: rgba(255, 0, 0, 0.3); -webkit-transition: background-color 0.25s ease-out; -moz-transition: background-color 0.25s ease-out; -o-transition: background-color 0.25s ease-out; transition: background-color 0.25s ease-out; cursor: pointer; }.cardinlayer:hover { background-color: rgba(255, 0, 0, 0.9) }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="button">CLICK</button> <div class="container"> <div id="cardslayer"></div> </div>
EDIT / SUGGESTION:编辑/建议：
I'd suggest that you don't mess with jQuery , if possible.如果可能的话，我建议你不要乱用jQuery 。 Here's a bit updated thing in Vue :这是Vue中的一些更新：
Vue.component('HouseCard', { props: ['idx'], methods: { onClick({ idx }) { alert(`Clicked house: ${ idx }`) }, }, template: ` <div class="cardinlayer" @click.stop="() => onClick({ idx })" > HOUSE {{ idx }} </div> ` }) new Vue({ el: "#app", data() { return { houses: [], } }, methods: { addHouse(houses) { return [...houses, houses.length] }, add1House() { this.houses = this.addHouse(this.houses) }, add22Houses() { let ret = this.houses for (let i = 0; i < 22; i++) { ret = this.addHouse(ret) } this.houses = ret } }, template: ` <div> <button @click="add1House">ADD 1 HOUSE</button> <button @click="add22Houses">ADD 22 HOUSES</button> <br /> <div class="container" > <div id="cardslayer" > <house-card v-for="(house, idx) in houses":key="idx":idx="idx" ></house-card> </div> </div> </div> ` })
.container { position: relative; } #cardslayer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.cardinlayer { display: flex; justify-content: center; align-items: center; height: 125px; padding: 8px 16px; background-color: rgba(255, 0, 0, 0.3); -webkit-transition: background-color 0.25s ease-out; -moz-transition: background-color 0.25s ease-out; -o-transition: background-color 0.25s ease-out; transition: background-color 0.25s ease-out; cursor: pointer; }.cardinlayer:hover { background-color: rgba(255, 0, 0, 0.9) }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div>
or the React solution:或React解决方案：
const { useState } = React const HouseCard = ({ idx }) => { const handleClick = () => { alert(`House clicked: ${idx}`) } return ( <div class="cardinlayer" onClick={handleClick}> HOUSE { idx } </div> ) } const App = () => { const [houses, setHouses] = useState([]) const addHouse = (houses) => [...houses, houses.length] const add1House = () => setHouses((prev) => addHouse(prev)) const add22Houses = () => { for(let i = 0; i < 22; i++) { setHouses((prev) => addHouse(prev)) } } return ( <div> <button onClick={add1House}>ADD 1 HOUSE</button> <button onClick={add22Houses}>ADD 22 HOUSES</button> <div class="container"> <div id="cardslayer"> { houses.map((_, idx) => <HouseCard idx={idx} />) } </div> </div> </div> ) } ReactDOM.render( <App />, document.getElementById('root') );
.container { position: relative; } #cardslayer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.cardinlayer { display: flex; justify-content: center; align-items: center; height: 125px; padding: 8px 16px; background-color: rgba(255, 0, 0, 0.3); -webkit-transition: background-color 0.25s ease-out; -moz-transition: background-color 0.25s ease-out; -o-transition: background-color 0.25s ease-out; transition: background-color 0.25s ease-out; cursor: pointer; }.cardinlayer:hover { background-color: rgba(255, 0, 0, 0.9) }
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <div id="root"></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.