Как я могу гарантировать, что действие ссылки по умолчанию всегда отключено?

Question

Я работаю над проектом, в котором я использую множество вызовов ajax, чтобы сделать взаимодействие сайта более элегантным.Процесс, который я использовал, заключается в том, чтобы ссылка на скрипт, выполняющий соответствующее действие, сохранялась как href в теге ссылки.Затем я использую jquery для назначения этого элемента, отключаю действие по умолчанию и выполняю вызов ajax.

Проблема в том, что иногда функция $(document).ready() не выполняется должным образом или откладывается до того, как пользователь может щелкнуть ссылки.Это приводит к тому, что страница открывается при обычной загрузке браузера.

Я реализовал код, который определяет, выполняется ли код через ajax или через браузер, поэтому все, что происходит, - это загрузка пустой страницы.В некоторых случаях он может определять тип выполнения и реагировать по-другому, но в других случаях, если он не выполняется ajax, это вызывает проблемы.

Есть ли способ гарантировать, что действие ссылки по умолчанию отключено всегда, независимо от хода загрузки страницы, или есть лучший подход, чем тот, который я использую?

Answer 1

Вы можете запустить код в глобальной области видимости, просто поместите блок кода JS после тех элементов (ссылок) DOM, с которыми вы работаете. Таким образом, вы не полагаетесь на обработчик событий для запуска. Размещение блока кода непосредственно перед закрывающим тегом </body> - хорошее место.

    <a class="my-links" href="/path/to/server-side.***"></a>
    <script>
    function myFunc () {
        $.ajax({
            url     : $(this).attr('href'),//use the href attribute for the link clicked as the URL for the AJAX request
            type    : 'get',
            success : function (serverResponse) {
                alert('Success');
            },
            error   : function () {
                alert('Error');
            }
        });

        //in a jQuery event handler, returning false is the same as calling: event.preventDefault(); event.stopPropagation()
        return false;
    }
    $('.my-links').bind('click', myFunc);
    </script>

</body>

Answer 2

Почему бы не использовать некоторый код, подобный следующему:

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>

Получено из: Какое значение "href" следует использовать для ссылок JavaScript, "#" или "javascript: void (0)"

Answer 3

Одна вещь, о которой я могу думать, это установить значение href в хэш. Это приведет к тому, что нажатая ссылка практически ничего не сделает. Вы можете вместо этого сохранить URL в атрибуте данных.

<a href="#" data-url="http://..." >go</a>

$('a').click( function() { 
    var url = $(this).data('url'); 
});

Answer 4

Задача здесь остается ненавязчивой. Один из способов сделать это - использовать атрибуты данных html5. Что вы можете сделать, так это указать ссылку на ссылку:

<a href="#" data-href="actual/file/path.html">

Затем в вашем document.ready вы можете поменять содержимое атрибута данных в атрибут href или просто обработчик щелчка использовать атрибут данных вместо атрибута href. Таким образом, если пользователь щелкает ссылку до ваших привязок javascript, ничего не произойдет. Чтобы поменять местами все атрибуты data-href, соответствующие hrefs просто используйте jquery:

$(document).ready(function(){
   $("a[data-href]").each(function(){
      $(this).attr("href",$(this).attr("data-href"));
   });
});

Answer 5

Если вы хотите предотвратить действие по умолчанию из html, то будет работать что-то вроде этого:

    <a onclick="some_function(); return false;"></a>

Это не загрязняет ваш URL с помощью # и вам не нужно устанавливать hrefатрибут на элементе.По сути, это решение аналогично использованию event.preventDefault(); в функции события клика с jQuery.

Answer 6

Попробуйте это.

$('a').click( function(e) { 
    e.preventDefault();
});