Question

提供了以下代码

我使用下面的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不起作用。

Answer 1

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

Answer 2

在document.ready中添加它可能会让它发挥作用。你正在选择一些东西;你必须等待DOM准备好做到这一点。

jQuery(function($) {

    // your jquery code goes here

});

Answer 3

您的代码在文档准备好之前正在执行，因此当$('button').click()执行时，该按钮尚不存在，因此解析选择器的jQuery函数找不到匹配的对象，因此代码不执行任何操作。您有几种选择：

1）您可以在HTML之后移动<script>标记和结果代码（在<body>的末尾），以便在代码执行时对象已经存在。

2）您可以将事件处理程序代码包装在一个就绪处理程序中，该处理程序在调用代码之前等待文档准备就绪：

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

这类似于使用window.onload = function() {};等待文档加载，但jQuery的方法将比window.onload更早执行（jQuery的方法不等待加载所有图像，仅用于DOM被解析并准备好进行操作）。

如何运行以下jQuery代码

3 个答案: