我有一些工作代码，当单击各种链接时，使用ajax重写一些html。我希望它做的是在悬停事件上动态创建一个对话框，而不是在单击事件上动态重写一些 html。这是有效的点击代码:
<html>
<head>
<script language="javascript" type="text/javascript" src="/wp-includes/js/jquery/jquery.js"></script>
</head>
<script language="javascript" type="text/javascript" src="/wp-content/themes/spacious/jquery-ui/jquery-ui.js"></script>
<body>
<div id="book001">
<a href="javascript:{}" class="citation"><span class="book">I, Robot</span><br>
<div id="author001"></div>
</div>
<div id="book002">
<a href="javascript:{}" class="citation"><span class="book">Stranger In A Strange Land</span><br>
<div id="author002"></div>
</div>
<script id="source" language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
$j( ".citation" ).click(function ( )
{
event.preventDefault();
var get_book = $j(this).find('span.book').html();
var divName = $j(this).parent().attr('id');
$j.ajax({
url: 'book_api.php',
data: {
book:get_book,
},
dataType: 'json',
success: function(data)
{
var content = data[4];
$j('#'+divName.replace('book','output')).html(content);
}
});
});
</script>
</body>
</html>
我打算使用 jQuery UI 创建对话框。我对如何让 ajax 代码影响对话框内容有点模糊。该页面上将有数百个此类链接，因此我不想预先填充数百个对话框。
最佳答案
用户可以快速触发许多悬停事件，因此将 ajax 调用绑定(bind)到每个事件可能不是您的最佳策略。在生产中，您的列表将从数据库中填充，因此如果您获取所需的信息(假设这是一小段 json)以及标题列表，您可以构建 html，使 json 位于数据属性中在 anchor 标记中。然后，您可以使用 jQuery 填充工具提示，而无需任何延迟或额外调用。
<a data-info="<some data about this book>">I, Robot</a>
$j(".citation").hover(function() {
event.preventDefault();
console.log($j(this).data('info'));
});
关于jquery - 如何将 ajax 引入 jQuery UI 对话框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29737849/