JQuery 工具提示无法使用 Jquery 模板工作。需要帮助
如果我的链接位于模板之外,则工具提示工作正常,但如果它位于 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
尝试 $(".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.