我正在使用精简版工具提示菜单模板选项。我想在单击工具提示中的列表项之一时发出警告。我想定位工具提示列表项。
<td>
<a href='#' class = 'sales_tooltip' data-templatename='Conifer'
data-title='<div class = "tooltip-menu">
<ul><li class="sales_rep"><a href="#">Sales Rep 1 </a></li>
<li class="sales_rep"><a href="#">Sales Rep 2 </a></li>
<li class="last-child sales_rep"><a href="#">Sales Rep 3 </a></li>
</ul>
</div>'>
<i class = 'fa fa-male ' aria-hidden='true'></i>
</a>
</td>
Javascript 代码
$('a.sales_tooltip').find('.sales_rep').click(function(){
alert('clicked');
console.log("Tooltip clicked");
});
我无法定位工具提示中的 li 项。
我实际上想在单击时将 a.sales_tooltip
的数据标题属性更改为单击的列表项。这是我尝试过的。
$('body').on('click', '.tooltip-menu li.sales_rep', function() {
var $set_value = $(this).html();
$(this.closest('a.sales_tooltip')).attr('data-title', $set_value);
});
最佳答案
li.sales_rep
元素不是 a.sales_tooltip
的子元素,因此您不能使用 $('a.sales_tooltip').find( '.sales_rep')
。
此代码正在搜索类 sales_rep
的元素,它们是 a.sales_tooltip
的子元素。
您正在使用的工具提示库可能正在将工具提示元素添加到正文中,因此您可以使用
$('body').on('click', '.tooltip-menu li.sales_rep', function() {
alert('clicked');
console.log("Tooltip clicked");
});
更新
经过长时间的讨论,实际问题似乎是“如何更改工具提示的内容之后它已经启动?”
好吧 - 在精简版工具提示中,不可能销毁/重置/重新初始化工具提示。
解决方案 - 当我们需要它时 - 将原始元素(具有工具提示)替换为克隆元素(相同的元素),并为该克隆元素创建一个新的工具提示。
$('body').on('click', '.tooltip-menu li.sales_rep', function() {
if (confirm("Have you chosen your sales rep?")) {
var $set_value = $(this).html();
var el = $('#'+ $(this).data('for'))
var cloned_el =el.clone();
cloned_el.attr('data-title', $set_value);
el.replaceWith(cloned_el);
cloned_el.LiteTooltip({
location: 'left-bottom',
trigger: 'hoverable',
padding:0,
margin:0
});
return true;
}
});
这是一个工作演示: http://codepen.io/anon/pen/KrbABp
关于javascript - 如何定位工具提示菜单模板项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38885564/