Как запустить функцию jQuery при нажатии любой ссылки (a) на моем сайте

Question

У меня новый сайт, построенный на системе corecommerce, который не имеет большого доступа к HTML и не к PHP.Единственное, что я могу использовать, это JavaScript.Их система в настоящее время не очень хороша по скорости загрузки страниц, поэтому я хотел, чтобы по крайней мере клиенты знали, что что-то происходит, в то время как они ждут загрузки страницы 5-8 секунд.Итак, я нашел несколько фрагментов кода и собрал их вместе, чтобы показать оверлейную загрузку GIF во время загрузки страницы.В настоящее время он будет работать, если вы нажмете где-нибудь на странице, но я хочу, чтобы он запускался только тогда, когда нажата ссылка (ссылка) на сайте (любая ссылка).

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

В любом случае, это мой сайт www.cosmeticsbynature.com, и это код, который я использую.Любая помощь будет отличной.

<div id="loading"><img src="doen'tallowmetopostanimage" border=0></div>


<script type="text/javascript">
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
  if (ns4)
 ld=document.loading;
 else if (ns6)
 ld=document.getElementById("loading").style;
 else if (ie4)
 ld=document.all.loading.style;
jQuery(document).click(function()
{
if(ns4){ld.visibility="show";}
else if (ns6||ie4)
var pb = document.getElementById("loading");
pb.innerHTML = '<img src="http://www.cosmeticsbynature.com/00222-1/design/image/loading.gif" border=0>';
ld.display="block";
});
</script>

Answer 1

Делать это будет проще, если вы включите jQuery на свои страницы.Как только это будет сделано, вы можете сделать:

$('a').click(function() {
 // .. your code here ..
 return true; // return true so that the browser will navigate to the clicked a's href
}

Answer 2

//to select all links on a page in jQuery
jQuery('a')

//and then to bind an event to all links present when this code runs (`.on()` is the same as `.bind()` here)
jQuery('a').on('click', function () {
    //my click code here
});

//and to bind to all links even if you add them after the DOM initially loads (`on()` is the same as `.delegate()` here; with slightly different syntax, the event and selector are switched)
jQuery(document).on('click', 'a', function () {
    //my click code here
});

Примечание: .on() является новым в jQuery 1.7.

Answer 3

Как насчет этого - я предполагаю #loading {display: none}

<div id="loading"><img src="http://www.cosmeticsbynature.com/00222-1/design/image/loading.gif" border=0></div>
<script type="text/javascript">
document.getElementById('loading').style.display='block'; // show the loading immediately
window.onload=function() 
  document.getElementById('loading').style.display='none'; // hide the loading when done
}
</script>

Answer 4

$("a").click(function(){
 //show the busy image
});

Answer 5

то, что вы делаете, это привязывает обработчик кликов к документу, чтобы, когда бы пользователь ни щелкнул код, выполнялся код, измените этот фрагмент кода

jQuery(document).click(function()

до

jQuery("a").click(function()

Answer 6

http://jsfiddle.net/vol7ron/wp7yU/

Проблема, которую я вижу в большинстве данных ответов, состоит в том, что люди предполагают, что события кликов происходят только из тегов <a> (привязка).В своей практике я часто добавляю события кликов к тегам span и li.Приведенные ответы не учитывают их.

Приведенное ниже решение анализирует элементы, содержащие оба события, которые создаются с помощью jQuery.click(function(){}) или <htmlelement onclick="" />.

$(document).ready(function(){

    // create jQuery event (for test)
    $('#jqueryevent').click(function(){alert('jqueryevent');});

    // loop through all body elements
    $('body *').each(function(){

        // check for HTML created onclick
        if(this.onclick && this.onclick.toString() != ''){
           console.log($(this).text(), this.onclick.toString());
        }

        // jQuery set click events
        if($(this).data('events')){           
            for (key in($(this).data('events')))
                if (key == 'click')
                   console.log( $(this).text()
                              , $(this).data('events')[key][0].handler.toString());
        }
   });
});

Использованиевыше, вы можете создать массив и вставить элементы, найденные в массиве (каждое место, которое вы видите console.log