我在下面的代码在
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'),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>
解决方法
当你有一个内部自动提交表格.
更换
更换
<button>Add a line</button>
用一个
<input type="button" value="Add a line" />
这样浏览器在点击时不会发布表单.
还记得要更改jQuery选择器
$('button').click(function () {
喜欢的东西
$(':button').click(function () {