jQuery，链接/按钮的侦听器和文档就绪问题

Question

I'm sorry, if my question is very simple, but can't understand it. As I understand it's good practice to attach links/buttons listeners via js but not html. I mean this is bad practice:

<a href="javascript:" onclick="temp();">

And this is good

<a href="javascript:" id="mylink">
in js code
$("#mylink").on...

As I understand the main idea is that html page mustn't contain any javascript code, and all js code must be in js file. Ok, I like this idea.

The problem I see, implementing such approach is when to attach such listeners.

All I found - is that listeners can be attach only when document is ready (otherwise we can't add listeners to elements that are not ready).

However, if I have a page that shows for example 100 rows from database, then its loading is not fast (at comparison to short pages).

And if we wait until document is ready, the user can't work with site.

Please correct me if I'm wrong or say how can we make it to work with long pages without such things as timeouts.

Answer 1

You can use delegated events : Instead of waiting for an element to be created/ready and then attaching an event handler, the handler is attached to a parent element, that exists early, such as the document object, since that always exists.

Example: Instead of

$('#mylink').on('click', function() { /* do something */ });

it's

$(document).on('click', '#mylink', function() { /* do something */ });

This is normally used when elements are added dynamically, but it works just as well "while the page loads".

EDIT: Short explanation:

Basically DOM events "bubble": When an element is clicked, then the event isn't just sent to that element, but to all of its ancestors, one by one going up the DOM tree. The event contains information which element was originally clicked and you could filter/check for the element yourself:

$(document).on('click', function(event) { 
  if( $(event.target).is('#mylink') ) {
    alert('the link was clicked');
  }
});

Using the selector as the second argument in .on() jQuery does the filtering for you, and sets this to the link instead of the document.

See also this example: http://jsfiddle.net/qhsktpcs/

Answer 2

Make sure to add all your JS code in this block :

$( function( ) { 
    $( '#mylink' ).on( 'click' , function ( e ) {
         console.log ( 'link clicked' );
         e.preventDefault();
    });
    // the rest of your code ... 
});

Otherwise, it will try to register click events on elements that are not yet created (since the DOM is not ready yet) and it will wait untill everything's ready ( even if you have ~100 rows to be pulled from the DB like you said )

** EDIT ** Example here : http://jsfiddle.net/6ctd2hqs/1/

Answer 3

You can test if your page is ready, and then start attaching listeners. Eg for jQuery:

$.ready(function() {
  // listeners here
})