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

时间:2016-11-02 21:21:14

标签: javascript jquery css asp.net webmethod

我有一个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;
&#13;
&#13;

2 个答案:

答案 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)

sample run before fix

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

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