jQuery myClass.click не работает, но работает функция html.click - PullRequest
Новая
       10

jQuery myClass.click не работает, но работает функция html.click

0 голосов
/ 04 сентября 2018

за свою жизнь я не могу понять это. Я пробовал классы, идентификаторы и обычные селекторы элементов. Ниже приведен фрагмент кода, который я пытаюсь запустить. 

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

Кажется, что в любое время я пытаюсь связать свою функцию с классом или идентификатором, который она не хочет запускать. Я также попробовал метод .on ("click", function ()) с теми же результатами.

Любая помощь будет принята с благодарностью! Я никогда не сталкивался с этим раньше.

Спасибо!

1 Ответ

0 голосов
/ 04 сентября 2018

Ваш код выполняется, но причина - <a> element, он обновляет всю страницу и в результате вы не видите console.log. Если вы действительно хотите добавить событие клика на <a>, вам следует добавить следующую строку. 

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

Переменная e и функция preventDefault() являются ключом здесь. Как вы можете догадаться, protectDefault не запускает код по умолчанию для <a>, поэтому он не обновит вашу страницу.

Я надеюсь немного помочь вам

...