Jquery 首先点击在 IBM Mobile 中不起作用

Question

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

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

    });
});

下面是我的htmlDOM结构

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

我的 jquery 点击功能无法使用，点击时没有事件。它甚至没有在控制台中显示错误。请帮我解决这个问题

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

Answer 1

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

这不起作用，因为在您的 HTML <div class="menuHorizontal">mush be close with</div> 中您没有 div 内部的 div .menuHorizontal 因此事件未绑定在任何 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 一定可以正常工作。

这里是Working Fiddle

Answer 2

您设置此范围的方式会将事件附加到分配给 class menuHorizontal 的 div 中包含的所有 div。在您发布的代码中，有 none 个！

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

您用 class menuHorizontal 关闭 div 太早了。下面两个选项。前者还会将事件附加到 "mush be close with" 文本，而后者不会。

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

您是否尝试像这样使用 class menuHorizontal 将事件附加到 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');
    });
});

Jquery 首先点击在 IBM Mobile 中不起作用

Jquery Click not working in IBM Mobile first

javascript

jquery

ibm-mobilefirst