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');
    });
});