2014-01-22 3 views
-1

Я нуб в JQuery, пытаясь мои руки на базовую функциональность этого

У меня есть HTML, как показано ниже.

<html> 
<head> 
    <script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script> 
    <script type="text/javascript" src="js/start.js"></script> 
    <script> 
     $(mainFunction()); 
     $('#label1').prop('innerHTML', "test"); 
    </script> 

    <title></title> 
</head> 
<body> 
    <label id="label1"></label> 
</body> 

</html> 

Из start.js, я пытаюсь манипулировать элементы в этом файле HTML, как показано ниже.

function start(name){ 
    this.iam = name; 
    this.getName = function(user){ 
     return this.iam; 
    } 
} 

function mainFunction(){ 
    var label = $('#label1'); 
    var oStart = new start("test"); 
    label.prop("innerHTML" ,oStart.getName("test")); 
} 

Когда я пытаюсь для поиска Что в «метке» в приведенном выше коде, я получаю [] печатается на консоль. Что я здесь делаю неправильно?

ответ

3

$(mainFunction()); - ваш вопрос. Вместо этого дайте ссылку на функцию document.ready.

Как это:

$(mainFunction); 

Хотя делать $(mainFunction()); вы вызываете функцию mainFunction при настройке обработчика, который означает, что он запускается на выполнение слишком рано, прежде чем DOM дерево было построено.

Или для того, чтобы избежать путаницы, вы могли бы сделать:

$(function(){ 
    mainFunction(); 
}); 

помнить также, что этот вопрос не будет, если вы перемещаете ваш сценарий только до конца тела тега. Вам не нужно слушать обработчик документа. Плюс в виде сокращенной вы можете просто сделать label.html(oStart.getName("test"));

+0

Спасибо. это было просто. – Zeus

3

Вам нужно дождаться готовности DOM перед использованием jQuery.

Это делается так:

$(document).ready(function() { 
    // All your code touching the DOM in here 
}); 

отметить также, что эта строка: $(mainFunction()); использует возвращаемое значение mainFunction, это не вызывает, когда DOM готова.

Смежные вопросы