1

我有一个管理网站，它使用图标来指示何时可以删除、编辑或创建某些内容。我使用引导工具提示来做到这一点，并且将工具提示绑定到每个具有删除图标/按钮的页面上的所有元素很容易：

$('.delete-btn').tooltip({
  placement: 'top',
  title: 'Slet'
});

由于我使用 ajax 和 dom 操作来添加新元素（新的删除按钮），所以前面的示例不会将工具提示添加到新（文档准备好后）添加的按钮。我找到了这样的解决方案：

$('body').tooltip({
    selector: '.delete-btn',
    placement: 'top',
    title: 'Slet'
});

这也有效。问题是我也需要“.edit-btn”上的工具提示。我想我可以复制上面的示例并将选择器更改为“.edit-btn”。问题是 - 它不起作用 - 只有 body 元素上的第一个工具提示似乎起作用。我尝试交换订单，然后我可以让 '.edit-btn' 工作，但随后 '.delete-btn' 停止工作。似乎一次只能在给定元素（主体）上设置工具提示，并且只有第一个有效 - 即使我通过不同的选择器？

我在这里遗漏了什么 - 有一个简单的解决方案吗？如果我不必手动使用工具提示手动初始化每个新创建的元素，我会非常喜欢。我也在考虑做一个

$('body').on('mouseover', '.btn-delete', function()...
$('body').on('mouseout', '.btn-delete', ....

但这似乎需要做很多工作，并将显示工具提示的责任从引导插件转移到我自己的代码中......

4

1 回答 1

0

我想我找到了解决方案，但我会把它留在这里，这样你就可以告诉我是否有更好的方法。

$('body').tooltip({
    selector: '.edit-btn, .delete-btn, .create-btn',
    placement: 'top',
    title: function () {
        var elem = $(this);
        if (elem.hasClass('edit-btn'))
            return 'Rédiger';
        if (elem.hasClass('delete-btn'))
            return 'Slet';
        if (elem.hasClass('create-btn'))
            return 'Opret';

        return 'fejl match tooltip';
    }
});
于 2014-02-21T09:19:59.500 回答