通过 jquery 调用 Web 服务后工具提示 css 类丢失答案

【问题标题】：Tooltip css class lost after web service call via jquery通过 jquery 调用 Web 服务后工具提示 css 类丢失
【发布时间】：2016-11-02 21:21:13
【问题描述】：

我有一个 jquery web 服务，它会影响同一页面上的 css 类工具提示。

问题是这样的；当页面最初加载时，工具提示 css 工作正常，但在 web 服务调用页面上的按钮后，工具提示类丢失并显示为标准视图。这是什么原因造成的？

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>

【问题讨论】：

标签： javascript jquery css asp.net webmethod

【解决方案1】：

我不确定，但我怀疑这条线是你的问题：

obj.innerHTML = obj.innerHTML + data.d;

你用这行来连接你的工具提示：

$('.masterTooltip').hover(function() {

它在页面上的所有 .masterTooltip 元素上连接了一个 hover 处理程序......在那个时刻（“那个时刻”是页面加载并触发 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

【讨论】：

非常感谢您的详细回答。我们将立即尝试您的解决方案。
您好，第一个解决方案使第一个图像正确工作工具提示，但第二个图像仍然具有默认工具提示。但是第二种解决方案效果很好。我们创建了函数 RegisterHover() 并在 jquery 请求中调用它。然后它起作用了。非常感谢。
很高兴我能帮上忙。

【解决方案2】：

sample run before fix

如上所示，我为已接受的解决方案编写了新的代码块。

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

【讨论】：