Question

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

$('.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', ....

但这看起来似乎很多工作，并且将工具提示从bootstraps插件显示出来并转移到我自己的代码中......

Answer 1

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

$('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';
    }
});

同时在身体上有不同的工具提示选择器？

1 个答案: