[英]Jquery Click not working in IBM Mobile first
Below is the code i have added in main.js file 以下是我在main.js文件中添加的代码
$(function(){
$(".menuHorizontal div").click(function(){
console.log('hi');
});
});
Below is my html DOM structure 下面是我的html DOM结构
<div class="menuHorizontal">
<div class="yellow-borBottom">All</div>
<div>Elevators</div>
<div>Escalators</div>
<div>Walkways</div>
</div>
my jquery click function wont works, no event on click. 我的jquery click函数无法正常工作,点击时没有事件。 not even it shows error in console. 甚至没有显示控制台错误。 plz help me to resolve this 请帮我解决这个问题
I have added a seperate Jquery file too but still wont works 我也添加了单独的Jquery文件,但仍然无法正常工作
$(".menuHorizontal div").click(function(){
console.log('hi');
});
This does not work because in your HTML <div class="menuHorizontal">mush be close with</div>
you dont have a div inside of the div .menuHorizontal
so the event is not binded on any div ( as it doesn't exist). 这是行不通的,因为在您的HTML <div class="menuHorizontal">mush be close with</div>
您在div .menuHorizontal
内部没有div,因此该事件未绑定到任何div上(因为它没有存在)。 So you can do as below. 因此,您可以执行以下操作。
Change your HTML to 将您的HTML更改为
<div class="menuHorizontal">mush be close with
<div class="yellow-borBottom">All</div>
<div>Elevators</div>
<div>Escalators</div>
<div>Walkways</div>
</div>
And the existing jquery must work fine. 并且现有的jquery必须工作正常。
And here is Working Fiddle 这是工作小提琴
The way that you have this scoped attaches an event to all div's contained within a div assigned class menuHorizontal
. 这种作用域的方式menuHorizontal
事件附加到div分配的类menuHorizontal
包含的所有div中。 In the code that you posted, there are none of these! 在您发布的代码中,没有这些!
<div class="menuHorizontal">mush be close with</div> // No divs inside here!
You closed the div with class menuHorizontal too soon. 您过早用class menuHorizontal类关闭了div。 Two options below. 下面有两个选项。 The former will also attach the event to the "mush be close with" text, while the latter will not. 前者还将事件附加到“必须紧密联系”文本上,而后者则不会。
<div class="menuHorizontal">
<div>mush be close with</div>
<div class="yellow-borBottom">All</div>
<div>Elevators</div>
<div>Escalators</div>
<div>Walkways</div>
</div>
<div class="menuHorizontal">>mush be close with
<div class="yellow-borBottom">All</div>
<div>Elevators</div>
<div>Escalators</div>
<div>Walkways</div>
</div>
Were you trying to scope like this, which attaches the event to div's with class menuHorizontal? 您是否正在尝试像这样将作用域附加到带有menuHorizontal类的div的作用域?
$("div.menuHorizontal").click(function(){
console.log('hi');
You might also want to change your scope to the higher level div, like so. 您可能还希望将作用域更改为更高级别的div,就像这样。 Google event bubbling
for more info Google event bubbling
以获取更多信息
$(".menuHorizontal").click(function(){
console.log('hi');
Also, consider using jQuery .on(), as follows. 另外,考虑使用jQuery .on(),如下所示。 It's a little more current, and generally more flexible. 它是最新的,并且通常更灵活。 http://api.jquery.com/on/ http://api.jquery.com/on/
$(function(){
$(".menuHorizontal div").on('click', function(){
console.log('hi');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.