2011-12-19 95 views
6

我的下面的代码在HTML中使用时工作正常。我试图把它放在一个表单中并停止工作。如何解决这个问题?jQuery不能与runat =“server”一起工作

<!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> 

当表格标签被删除后,它又重新开始工作。

+0

? – Chris 2011-12-19 15:13:25

+0

你用什么.net版本? – 2011-12-19 15:17:02

+0

是啊!当打开时没有

标签,一切工作正常。 – 2011-12-19 15:20:13

回答

2

当你有一个里面自动提交表单。 与

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

和方式单击时,浏览器不会发布形式更换

<button>Add a line</button> 

也请记住,如果你看一下HTML浏览器的所有元素的ID,你期望他们从

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

jQuery选择更改为类似

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

这工作!谢谢安德烈斯。 – 2011-12-19 16:56:26

2

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

这应该让你知道发生了什么。对此有许多解决方案,但这取决于您使用的是哪个版本的.net。

+0

我正在使用.NET 4.0,不知道什么是MVC。 – 2011-12-19 15:18:09

6

对于.NET 4.0,添加ClientIDMode Static用于标签出现在客户端,与它们出现在服务器端相同。

喜欢的东西

    <form id="form1" runat="server" ClientIDMode="Static"> 
在你的jQuery/Javascript代码

对于老.NET中使用 '<%= Control.ClientID%>' 每当你指的控制

喜欢的东西

    '<%= form1.ClientID %>' 
+0

这对我没用Emmanuel :( – 2011-12-19 15:31:32

+0

请问你可以发布通过运行你的代码生成的HTML。你添加了什么标签'ClientIDMode =“Static”'? – 2011-12-19 15:33:55

+0

通过添加'ClientIDMode =“Static”'我得到了当你的系统没有放置的时候,我得到的输出是相同的! – 2011-12-19 16:45:44

相关问题