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

$(".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). So you can do as below.

Change your HTML to

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

And here is Working Fiddle

Answer 2

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