通过jQuery进行Web服务调用后，Tooltip CSS类丢失了
[英]Tooltip css class lost after web service call via jquery
问题描述
我有一个jQuery Web服务会影响同一页面上的工具提示的CSS类。
问题是这样的； 当页面最初加载时，tooltip css可以正常工作，但是在Web服务上调用页面上的一个按钮后，tooltip类丢失了，并显示为标准视图。 是什么原因造成的？
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"); } } }
<%@ 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>
2 个解决方案
解决方案1
0 已采纳 2016-11-02 21:47:44
我不确定，但我怀疑这是您的问题：
obj.innerHTML = obj.innerHTML + data.d;
您可以通过以下行连接工具提示：
$('.masterTooltip').hover(function() {
这会在那一刻在页面上的所有.masterTooltip元素上连接一个hover处理程序（“那一刻”是页面加载并触发DOM ready事件的时间）。
但是，当您弄乱一个元素的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
解决方案2
0 2016-11-03 11:16:43
我为可接受的解决方案编写了新的代码块，如上所示。
<script> function GetData() { $.ajax({ url: 'http://localhost:27738/WebForm3.aspx/GetData', type: 'POST', data: '', dataType: 'json', contentType: 'application/json', success: function (data) { var obj = document.getElementById("lblData"); obj.innerHTML = obj.innerHTML + data.d; //Call RegisterHover $(document).ready(function () { registerHover(); }); } }); } </script>
<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>
append（）listview Javascript后失去JQuery Mobile CSS样式
[英]Lost of JQuery Mobile CSS Style after append() listview Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.