CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Csteele5
Csteele5

Reputation: 1292

jQuery onclick function won't fire on nested divs

I've got a web-page that features two buttons at the top which are meant to sort some data later in the page. For some reason I can't get the nested #byFilter to accept an onclick(function())

Javascript

$(document).ready(function() {

            $('.filter').click(function() {
                console.log('I\'ve gotten');

            });

            $('#byName').click(function(e) {
                e.stopPropagation();
                console.log('this far');

            });

            //just some stuff with geolocation
            getLocation().done(function() {

                getStuff(origin);

            });
        });

HTML

<section id="Sortby">

            <div class="filter" id="#byName">
                Name
            </div>
            <div class="filter" id="#byDistance">
                Distance
            </div>
            <br style="clear:both;">

So when I load the page and click on the divs, all I get is "I've gotten"

I don't remember any extra step required to attach a click listener to a nested div like this, but I can't seem to get this to work. I fear I'm missing something quite trivial.

Upvotes: 0

Views: 150

Answers (1)

AmmarCSE
AmmarCSE

Reputation: 30607

Remove the pound(#) signs in the id attributes themselves. Pound is only used in a selector as a short-hand to refer to an id attribute

$(document).ready(function() {

  $('.filter').click(function() {
    console.log('I\'ve gotten');

  });

  $('#byName').click(function(e) {
    e.stopPropagation();
    console.log('this far');

  });

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="filter" id="byName">
  Name
</div>
<div class="filter" id="byDistance">
  Distance
</div>
<br style="clear:both;">

Upvotes: 3

Related Questions