Question

我有一些工作代码，当点击各种链接时，使用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代码影响对话框内容，我有点模糊。该页面上会有数百个这样的链接，所以我不想预先填充数百个对话框。

Answer 1

用户可以快速触发许多悬停事件，因此将ajax调用绑定到每个事件可能不是您的最佳策略。在生产中，您的列表将从数据库中填充，因此如果您获取所需的信息（假设这是一小部分json）以及标题列表，您可以构建您的html，使json位于数据属性中在锚标签中。然后，您可以使用jQuery填充工具提示，不会有任何延迟或额外的调用。

<a data-info="<some data about this book>">I, Robot</a>

$j(".citation").hover(function() {
  event.preventDefault();
  console.log($j(this).data('info'));
});

Answer 2

事实证明答案很简单。只需替换每个作者的重复div：

<div id="author002"></div>

使用单个div作为对话框的容器：

<div id="dialog"></div>

然后只引用$j( "#dialog" ).html而不是$j('#'+divName.replace('book','output')).html。

如何将ajax导入jQuery UI对话框？

2 个答案: