Search code examples
jqueryeventsdocumentready

Jquery events working only in document ready

i start a little web-project with .net MVC 3. My Problem: i included Jquery 1.8.3.js. But my functions doesnt work in the javascript files:

This isn´t working:

$(document).ready(function() {
    $('input:button').button();
});

$('#testbut').on('click', function (event, ui) {

    alert("CLICK");

});

this is still working fine: 

$(document).ready(function() {
    $('input:button').button();

    $('#testbut').on('click', function (event, ui) {

    alert("CLICK");

    });
});

i have no idea why.

the include is in right order.

Solution

  • The first example fails because the code is being executed as the page is being loaded and the elements it refers to haven't been loaded yet. This is also why the second example does work.

    By placing your code in a document ready block it holds off executing it until the page has loaded.