JQuery 工具提示无法使用 Jquery 模板工作。需要帮助

发布于 2024-12-01 10:27:29 字数 2481 浏览 0 评论 0原文

如果我的链接位于模板之外,则工具提示工作正常,但如果它位于 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

});

If my link is outside the template than tooltip is working fine but if its in JQuery template not working at all. Tried many examples but no success.

Below is the code

In Js file after grid is loaded

ReloadGrid();

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

On Page

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

Use Live like below. Not working?

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

});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

紫罗兰の梦幻 2024-12-08 10:27:29

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

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

try $(".hello").live("tooltip", function(){ instead of $(".hello").tooltip({

Since your hello class element is not a part of the dom when it is loaded, your code is probably trying to wire up something that doesn't exist yet. The live method will ensure that all future elements with class hello will get the tooltip event added to it.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文