javascript - jQuery onclick 函数不会在嵌套的 div 上触发

Question

我有一个网页，顶部有两个按钮，用于对页面后面的一些数据进行排序。出于某种原因，我无法让嵌套的 #byFilter 接受 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;">

所以当我加载页面并点击 div 时，我得到的只是“我已经得到”

我不记得将点击监听器附加到像这样的嵌套 div 所需的任何额外步骤，但我似乎无法让它工作。我担心我遗漏了一些非常微不足道的东西。

Answer 1

删除 id 属性本身中的井号(#)。磅仅在选择器中用作引用 id 属性的简写

$(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;">