Jquery Click not working in IBM Mobile first

Question

Below is the code i have added in main.js file

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

    });
});

Below is my html DOM structure

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

Answer 1

The way that you have this scoped attaches an event to all div's contained within a div assigned class menuHorizontal. 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. 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?

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

You might also want to change your scope to the higher level div, like so. Google event bubbling for more info

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

Also, consider using jQuery .on(), as follows. It's a little more current, and generally more flexible. http://api.jquery.com/on/

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