Question

我的下面的代码在HTML中使用时工作正常。我尝试将相同的代码放在表单中，然后停止工作。如何解决这个问题？

<!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="jquery-1.7.1.min.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>
    jQuery(document).ready(function ($) {
        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>
<form id="form1" runat="server">
<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>
</form>
</body>
</html>

删除表单标记后，它会再次开始工作。

Answer 1

对于.NET 4.0，为客户端添加 ClientIDMode静态标记，以便它们出现在服务器端。

像

这样的东西

                  <form id="form1" runat="server" ClientIDMode="Static">

对于旧的.net使用'＆lt;％= Control.ClientID％＆gt;'在您引用控件时，在您的jQuery / Javascript代码中

像

这样的东西

                 '<%= form1.ClientID %>'

Answer 2

提示：查看最终HTML中代码的ID。

这可以让你知道发生了什么。有很多解决方案，但这取决于您使用的.net版本。

Answer 3

当你有一个内部时，自动提交表格。替换

<button>Add a line</button>

带

<input type="button" value="Add a line" />

这样浏览器在点击时就不会发布该表单。

还要记住从

更改jQuery选择器

$('button').click(function () {

类似

$(':button').click(function () {

jQuery无法使用runat =“server”

3 个答案: