Как запустить следующий код JQuery

Мой друг дал следующий код, который работает здесь удивительным http://jsfiddle.net/WVLE2/Как запустить следующий код JQuery

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script> 
<script src="http://code.jquery.com/jquery-1.7.1.js" ></script> 
<title>Chat scroll test</title> 
<style type="text/css"> 
#chat 
{ 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
    overflow-y: auto; 
} 
</style> 
<script> 
monitor = function() { 
    var $this = $(this), 
     wrap = $this.find('.wrapper'), 
     height = $this.height(), 
     maxScroll = wrap.height() - height, 
     top = $this.scrollTop(); 
    if (maxScroll === top) { 
     $this.addClass('atBottom'); 
    } else { 
     $this.removeClass('atBottom'); 
    } 
} 
    window.setInterval(function() { 
     monitor.call($('#chat').get(0)); 
    }, 350); 
$('#chat').bind('addMessage', function(e, message) { 
    var $this = $(this), 
     top = $this.scrollTop(), 
     scroll = $this.hasClass('atBottom'); 
    $this.find('.wrapper').append(message); 
    if (scroll) { 
     var wrap = $this.find('.wrapper'), 
      height = $this.height(), 
      maxScroll = wrap.height() - height 
     $this.scrollTop(maxScroll); 
    } 
}) 
$('button').click(function() { 
    $('#chat').trigger('addMessage', 'asdgagasdg<br/>'); 
}); 

</script> 
</head> 

<body> 
<div id="chat"> 
    <div class="wrapper"> 
     adsgasgda<br/> 
     adsgasg<br/> 
     asd<br/> 
     adsgasgda<br/> 
     adsgasg<br/> 
     adsgasgda<br/> 
     adsgasg<br/> 
     adsgasgda<br/> 
     adsgasg<br/> 
     adsgasgda<br/> 
     adsgasg<br/> 
     adsgasgda<br/> 
     adsgasg<br/> 
     adsgasgda<br/> 
     adsgasg<br/> 
    </div> 
</div> 
<button>Add a line</button> 
</body> 
</html>

И это не дает ничего, что даже не добавляет линию при нажатии кнопки. Результат аналогичен HTML, но jQuery не работает.

источник

2011-12-19 Mad coder.

Нужен ли мне какой-либо компилятор/что-нибудь в дополнение к запуску кода jQuery? –

Вы включаете jQuery два раза. Один разработчик и один сведены к минимуму. Просто мин хорошо. –

@EmreErkan - Спасибо за это Эмре. В чем разница между двумя? –

jQuery(document).ready(function($) { 
    /* your jQuery code */ 
});

источник

2011-12-19 09:24:37 noob

:) Это сработало! Спасибо, мича. –

Добавление его внутри document.ready может заставить его работать. Вы выбираете некоторые вещи прямо с места в карьер; вам нужно подождать, когда DOM будет готов сделать это правильно.

jQuery(function($) { 

    // your jquery code goes here 

});

источник

2011-12-19 09:25:43

Нашел то же самое от Мича. В любом случае спасибо! :) –

Ваш код выполняется до того, как документ будет готов, таким образом, когда $('button').click() выполняется, кнопка еще не существует, так что функция JQuery, чтобы разрешить ваш селектор не находит соответствия объектов и, следовательно, код ничего не делает. У вас есть несколько вариантов:

1) Вы можете переместить теги <script> и полученный код после HTML (в конце <body>), чтобы объекты уже существовали при выполнении кода.

2) Вы можете обернуть код события обработчиков в готовом обработчик, который ждет документ, который будет готов до вызова кода, как это:

$(document).ready(function() { 
    // put your code here 
});

Это похоже на использование window.onload = function() {}; ждать документа для загрузки, но метод jQuery будет выполняться раньше, чем window.onload (метод jQuery не ждет загрузки всех изображений, просто для DOM, который будет разобран и готов к манипуляции).

источник

2011-12-19 09:28:48 jfriend00

Как запустить следующий код JQuery

ответ

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