jQuery工具提示类在ajax调用后无法正常工作

时间:2015-07-22 15:15:53

标签: jquery css ajax

我有一些由onclick事件调用的函数,这些函数非常有用。他们发送$ .post()请求,并且在成功时我检索由post()请求中调用的php文件返回的(数据)。

我的奇怪问题是,在ajax调用之后,jQuery ToolTip插件没有读取css样式表。是的,这就是为什么我说的很奇怪。

我将工具提示自定义为黑色,三个圆角和小白色文本,看起来很棒,但在调用ajax之后,文本的角和大小都会改变(所有角都是圆角和更大的文本)。工具提示有效,但看起来很奇怪。 这是一些代码:

css声明

#aToolTip {
position: absolute;
display: none;
z-index: 50000;

}

#aToolTip .aToolTipContent {
    position:relative;
    margin:0;
    padding:0;
}

.defaultTheme {
border:2px solid #444;
background:rgba(102,102,102,1);
color:rgba(255,255,255,1);
text-shadow:0 0 3px #666;
font-weight:bold;
font-size:11px;
margin:0;
padding:3px 6px;

-moz-border-radius: 12px 12px 12px 0;
-webkit-border-radius: 12px 12px 12px 0;
-khtml-border-radius: 12px 12px 12px 0;
border-radius: 12px 12px 12px 0;

-moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
-webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */

}

.defaultTheme #aToolTipCloseBtn {
    display:block;
    height:12px;
    width:18px;
    background:url(../images/closeBtn.png) no-repeat;
    text-indent:-9999px;
    outline:none;
    position:absolute;
    top:-20px;
    right:-30px;
    margin:2px;
    padding:4px;
}

当然是头部声明

<link rel="stylesheet" media="screen" href="css/style.css" />
<link rel="stylesheet" media="screen" href="css/atooltip.css" />
<link rel="stylesheet" media="screen" href="css/jquery-ui.css" />

javascript函数

function addCul(culId, pId) {
    var value = culId.value;
    $.post("post.php", {
        addColId: value,
        prodId: pId
    }, function(data) {
        $('.culori').html(data);
        $('.normalTip').tooltip();
    })
}

还有我看到的图像。

Normal tooltip

Tooltip without complete css

希望有人可以解决这个问题,'原因很烦人。

编辑。 明白你的意思,只是添加了CSS标记,无法真正添加所有的html,但这是一个简单的参考。 我有一个<button onclick="function()"></button>可以正常工作。 jquery帖子工作正常,但工具提示看起来就像你在图片中看到的一样。无法解释为什么它保持颜色,而不是文本大小。这是在执行jQuery post并将数据重新加载到目标div之后发生的。

0 个答案:

没有答案