jQuery myClass.click无效但html.click函数正常工作

Posted 2021-04-11

对于我的生活，我无法弄清楚这一点。我已经尝试了类，ID和常规元素选择器。下面是我试图运行的片段。

$(document).ready(function () {
    $(".myClass").click(function () {
        console.log("Hello!");
    });
});

上面的例子不会运行。但是，当将其更改为下面的示例时，它将运行。

$(document).ready(function () {
    $("html").click(function () {
        console.log("Hello!");
    });
});

下面的示例HTML

<div class="mapLegend">
<div class="mapLegend-header">
    <h2>Map Key</h2>
    <a href="" class="myClass">
        <img class="mapLegend-expandCollapse icon-sm" src="/app/img/Forward-Arrow-64.png" />
    </a>
</div>
<div class="mapLegend-content">
    <div class="mapLegend-value">
        <img alt="" src="/app/img/freight-map/last_truck_location.png" />
        <span class="label">Last Truck Location</span">
    </div>
    <div class="mapLegend-value">
        <img alt="" src="/app/img/Drop_hollow.png" />
        <span class="label">Delivered Load</span>
    </div>
    <div class="mapLegend-value">
        <img alt="" src="/app/img/freight-map/first_pick.png" />
        <span class="label">First Pick</span>
    </div>
    <div class="mapLegend-value">
        <div class="dot addPick"></div>
        <span class="label">Additional Pick</span>
    </div>
    <div class="mapLegend-value">
        <div class="dot checkCall"></div>
        <span class="label">Check Call / Previous Location</span>
    </div>
    <div class="mapLegend-value">
        <div class="dot addDrop"></div>
        <span class="label">Additional Drop</span>
    </div>
    <div class="mapLegend-value">
        <img alt="" src="/app/img/freight-map/final_stop.png" />
        <span class="label">Final Drop</span>
    </div>
</div>

似乎任何时候我尝试将我的函数绑定到它不想运行的类或ID。我也尝试了.on（“click”，function（））方法以及相同的结果。

任何帮助将不胜感激！我以前从未遇到过这个问题。

谢谢！

答案

您的代码运行，但原因是<a> element，它刷新所有页面，因此您没有看到console.log。如果你真的想在<a>上添加click事件，你应该添加以下行。

$(document).ready(function(){
    $(".myClass").click(function(e){
        e.preventDefault();
        console.log("clicked");
    });
});

变量eand函数preventDefault()是关键。您可以猜测，preventDefault不会运行<a>的默认代码，因此它不会刷新您的页面。

我希望能帮助你一点