【问题标题】:JQuery tooltip not working using Jquery template. Need helpJQuery 工具提示无法使用 Jquery 模板工作。需要帮忙
【发布时间】:2011-11-03 07:17:09
【问题描述】:

如果我的链接在模板之外,那么工具提示可以正常工作,但如果它在 JQuery 模板中根本不工作。尝试了很多例子,但没有成功。

下面是代码

加载网格后的Js文件中

ReloadGrid();

$(".hello").tooltip({
    track: true,
    delay: 0,
    showURL: false,
    fade: 250,
    bodyHandler: function () {
        return $($(this).next().html());
    },
    showURL: false
});

在页面上

<script id="cellTemplate" type="text/x-jQuery-tmpl">
    <tr  class="gridRowCursor"  >
        <td class="cellTd ">
            <input type="checkbox" id="deleteCb" />
            <input type="hidden" id="Id_ + ${Id}" class="idField" value="${Id}" />
        </td>
        <td class="cellTd">
            <input id="index" name="index" class="numberField" type="text" value="${IndexOrder}" />
        </td>
        <td  class="cellTdLeft" style="font-size:11px;">

            <a class="hello"  href="#">{{html DisplayName}}</a>

          <div id="tooltip" style="display: none">
                <div>
                   {{html UrlName}}
                </div>
            </div>



        </td>
        <td class="cellTd ">
            <input type="checkbox" id="activeCb" {{if Active}} checked{{/if}} />
        </td>
    </tr>
    <tr id="${Id}" class="gridRow" style="display: none;">
        <td class="cellTdLeft" colspan="5" style="padding-left: 15px; font-size:11px;">
            {{html UrlName}}
        </td>
    </tr>
</script>   


<span class="instructions">Only numeric value is allowed in IndexOrder textbox.</span>
<div class="gridDiv">
<table id="set1" class="gridTable" cellspacing="0" cellpadding="0" >
    <thead>
        <tr class="gridTitleRow">
            <td class="iconLink width36">Delete</td>
            <td class="iconLink width60">Sort Order</td>
            <td class="iconLink width500">Display Name</td>
            <td class="iconLink widthAuto">Active</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</div>

如下所示使用 Live。不工作?

$(".hello").live("tooltip", function() {
     track: true,
delay: 0,
showURL: false,
fade: 250,
bodyHandler: function () {
    return $($(this).next().html());
},
showURL: false

});

【问题讨论】:

    标签: jquery asp.net-mvc-3 jquery-templates jquery-tooltip


    【解决方案1】:

    尝试 $(".hello").live("tooltip", function(){ 而不是 $(".hello").tooltip({

    由于您的 hello 类元素在加载时不是 dom 的一部分,因此您的代码可能正在尝试连接一些尚不存在的东西。 live 方法将确保所有具有类 hello 的未来元素都将添加工具提示事件。

    【讨论】:

    • 我已根据您的建议编辑了我的问题。那正确吗? .工具提示不支持。您能否发布完整的工具提示代码以及您的建议。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-04-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多