jQuery Click首先无法在IBM Mobile中运行

Question

以下是我在main.js文件中添加的代码

 $(function(){
    $(".menuHorizontal div").click(function(){
       console.log('hi');

    });
});

下面是我的html DOM结构

    <div class="menuHorizontal">
      <div class="yellow-borBottom">All</div>
      <div>Elevators</div>
      <div>Escalators</div>
      <div>Walkways</div>
  </div>

我的jquery click函数无法正常工作，点击时没有事件。 甚至没有显示控制台错误。 请帮我解决这个问题

我也添加了单独的Jquery文件，但仍然无法正常工作

Answer 1

$(".menuHorizontal div").click(function(){
   console.log('hi');
});

这是行不通的，因为在您的HTML <div class="menuHorizontal">mush be close with</div>您在div .menuHorizontal内部没有div，因此该事件未绑定到任何div上（因为它没有存在）。 因此，您可以执行以下操作。

将您的HTML更改为

<div class="menuHorizontal">mush be close with
    <div class="yellow-borBottom">All</div>
    <div>Elevators</div>
    <div>Escalators</div>
    <div>Walkways</div>
</div>

并且现有的jquery必须工作正常。

这是工作小提琴

Answer 2

这种作用域的方式menuHorizontal事件附加到div分配的类menuHorizontal包含的所有div中。 在您发布的代码中，没有这些！

<div class="menuHorizontal">mush be close with</div> // No divs inside here!

您过早用class menuHorizo​​ntal类关闭了div。 下面有两个选项。 前者还将事件附加到“必须紧密联系”文本上，而后者则不会。

<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>

您是否正在尝试像这样将作用域附加到带有menuHorizo​​ntal类的div的作用域？

$("div.menuHorizontal").click(function(){
   console.log('hi');

您可能还希望将作用域更改为更高级别的div，就像这样。 Google event bubbling以获取更多信息

$(".menuHorizontal").click(function(){
   console.log('hi');

另外，考虑使用jQuery .on（），如下所示。 它是最新的，并且通常更灵活。 http://api.jquery.com/on/

$(function(){
    $(".menuHorizontal div").on('click', function(){
       console.log('hi');
    });
});