javascript - 如何定位工具提示菜单模板项

Question

我正在使用精简版工具提示菜单模板选项。我想在单击工具提示中的列表项之一时发出警告。我想定位工具提示列表项。

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



            });

Answer 1

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