Как предотвратить перенаправление пользователя на ссылку в JavaScript?

Question

var $ = function (id) {
    "use strict";
    return document.getElementById(id);
};

$(document).ready(function () {
    "use strict";
    $('redirect').click(function () {
        window.alert('you clicked the link');
        return false;
    }); 
});

 <a href="http://www.google.com" id="redirect">Visit Goggle</a>

У меня есть ссылка в HTML, и я хочу использовать JavaScript и Jquery для остальной части моего кода.Когда пользователь нажимает на ссылку, я хочу, чтобы всплыло предупреждение с сообщением, но я не хочу, чтобы ссылка перенаправляла их на эту страницу.Когда я просматриваю свой код в Chrome с помощью инструментов разработчика, я получаю сообщение об ошибке «Uncaught TypeError: не удается прочитать свойство« ready »of null».Почему свойство ready обнуляется и как я могу это исправить?

var $ = function (id) {
    "use strict";
    return document.getElementById(id);
};

$(document).ready (function () {
    "use strict";
    $('redirect').click(function () {
        window.alert('you clicked the link');
        return false;
    }); 
});

 <a href="http://www.google.com" id="redirect">Visit Goggle</a>

`

Answer 1

Ваша проблема в том, что вы переопределяете функцию jQuery $ на вашу собственную пользовательскую функцию.Не делай этого!Это полностью сводит на нет jQuery (вам придется использовать подробную форму jQuery).Вы также можете использовать preventDefault, чтобы предотвратить изменение гиперссылки на вашей странице.

$(document).ready(function () {
    "use strict";
    $('redirect').click(function(e) {
        e.preventDefault();
        window.alert('you clicked the link');
    }); 
});

Также убедитесь, что у вас есть jQuery - поместите это вверху вашей страницы:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Answer 2

var $ = function (id) {
    "use strict";
    return document.getElementById(id);
};

Если вы используете $ в качестве оболочки JQuery, то приведенный выше код переопределит эту переменную.Это означает, что это уже не jQuery, а пользовательская функция, которую вы установили.Попробуйте изменить имя функции или переменной выше.

Answer 3

Вам нужно использовать e.preventDefault(), вот так:

$(document).ready(function () {

    $('#redirect').click(function (e) {
        e.preventDefault();
        window.alert('you clicked the link');   
    }); 

});

Также, если вам нужно ссылаться на элементы по классу (с помощью jQuery):

$('.someClass').on('click', function() {
 ...

Если вы хотите получить к ним доступ по номеру:

$('#someId').on('click', function() {
...