javascript – 如何在包含ajax后初始化bootstraps工具提示？

我正在使用ajax将内容( HTML)加载到我的网站.除其他外,这包括以下代码段：

<a href="#" data-toggle="tooltip" title data-original-title="My tooltip text...">Hover me...</a>

如下所述：bootstrap 3 > tooltip,我需要初始化它.如何在ajax成功后初始化它？
编辑：完整的工作示例.在这里我模拟了一个“ajax调用”.问题是持续时间.当你删除超时它会工作：

<!DOCTYPE html>
<html lang="de">
	<head>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWpgmkzs7" crossorigin="anonymous">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
	</head>	
	<body>
	
		<div id="html" style="margin-top: 50px;">
			That works: <a href="#" data-toggle="tooltip" title="" data-original-title="My tooltip 1 text">Hover me 1...</a>
		</div>
		
		<div style="margin-top: 50px;">Ajax: <span id="ajax"></span></div>


		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
		<script type="text/javascript">
			// Document ready
			$(document).ready(function ()
			{
				loadResult();
				activatetooltip();
			});

			// Result
			function loadResult()
			{
				// "Ajax call"			
				setTimeout(function(){
                    var result = '<a href="#" data-toggle="tooltip" title="" data-original-title="My tooltip 2 text">Hover me 2...</a>';
					$("#ajax").html(result);
				},2000); // Simulate Ajax duration

				activatetooltip();
			}

			// Tooltip
			function activatetooltip()
			{
				$('[data-toggle="tooltip"]').tooltip();
			}
		</script>

	</body>
</html>

解决方法

https://plnkr.co/edit/KBsJK27F9Sb5kV2Ozy56

<a href="#" data-toggle="tooltip" data-original-title="Tooltip Right works fine" data-placement="right">Hover me...</a>

并在ajax成功中重新激活工具提示功能：

function loadResult()
{
    $.ajax({
        type: "POST",url: "index.PHP?action=loadResult",data: "id=1",dataType: 'text',success: function(data){
            var json = $.parseJSON(data);
            $("#result").html(json.result);
            activatetooltip();
        }
    });
}

只需添加此属性：数据放置=“右”

javascript – 如何在包含ajax后初始化bootstraps工具提示？

解决方法

相关推荐