我有一个jquery Web服务,它影响同一页面上的css类工具提示。
问题在于此;当页面最初加载时,tooltip css工作正常,但在web服务调用vith页面上的按钮后,工具提示类丢失并显示为标准视图。什么会导致这种情况?
c# Code Block
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace SampleWeb {
public partial class Sample: System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
GetDataForPageLoad();
}
}
public void GetDataForPageLoad() {
StringBuilder sb = new StringBuilder();
lblData.Text = string.Format("<a title=\"click to view topic {0}.\" class=\"masterTooltip\"><img width=\"50px\" src='images/Chrysanthemum.jpg' alt=\"{0}\" /></a><br/>", "XXX");
}
[WebMethod]
public static string GetData() {
return string.Format("<a title=\"click to view topic {0}.\" class=\"masterTooltip\"><img width=\"50px\" src='images/Chrysanthemum.jpg' alt=\"{0}\" /></a><br/>", "XXX");
}
}
}
&#13;
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sample.aspx.cs" Inherits="SampleWeb.Sample" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>test</title>
<style type="text/css">
.tooltip {
display: none;
position: absolute;
border: 1px solid #b83e3e;
background-color: #d84949;
border-radius: 5px;
padding: 5px;
color: #fff;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function GetData() {
$.ajax({
url: 'http://localhost:6878/Sample.aspx/GetData',
type: 'POST',
data: '',
dataType: 'json',
contentType: 'application/json',
success: function(data) {
var obj = document.getElementById("lblData");
obj.innerHTML = obj.innerHTML + data.d;
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="Button1" type="button" value="Get" onclick="GetData();" />
<br />
<br />
<asp:Label ID="lblData" runat="server" Text=""></asp:Label>
<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function() {
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({
top: mousey,
left: mousex
})
});
});
</script>
</form>
</body>
</html>
&#13;
答案 0 :(得分:0)
我不确定,但我怀疑这一行是你的问题:
obj.innerHTML = obj.innerHTML + data.d;
您使用此行连接工具提示:
$('.masterTooltip').hover(function() {
在页面上的所有hover
元素上挂起.masterTooltip
处理程序...此时(使用&#34;那个时刻&#34;当页面加载并触发DOM时)准备好的事件)。
但是当你弄乱元素的innerHTML
时,你实际上正在删除旧元素并用新元素替换它们,并且因为你还没有将hover
处理程序连接到那些元素上新的,他们不工作。
如果我没有问题,我会看到两种可能的解决方案:
1)将所有$('.masterTooltip').hover(function() {
代码放在函数中。像当前一样调用该函数onReady
,但在innerHTML
更改后再次调用它以将处理程序连接到新元素
2)根本不要删除旧元素;而不是使用innerHTML来替换旧的lblData
内容:
var obj = document.getElementById("lblData");
obj.innerHTML = obj.innerHTML + data.d;
尝试使用jQuery添加新元素:
$('#lblData').append('<span>' + data.id + '</span>');
// I'm not even sure the span is needed, but I added it to be safe
答案 1 :(得分:0)
我为已接受的解决方案编写了新的代码块,如上所示。
<form id="form1" runat="server">
<input id="Button1" type="button" value="Get" onclick="GetData();" /><br /><br />
<asp:Label ID="lblData" runat="server" Text=""></asp:Label>
<!--call at ready-->
<script type="text/javascript">
$(document).ready(function () {
registerHover();
});
//New function
function registerHover() {
// Tooltip only Text
$('.masterTooltip').hover(function () {
// Hover over code
// alert("test");
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}, function () {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function (e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
}
</script>
</form>
{{1}}