Question

我一直在尝试将jQuery hovercard（http://designwithpc.com/Plugins/Hovercard）与我们的Web应用程序集成。当我们将鼠标悬停在用数据属性data-toggle =“user”标识的用户名链接上时，我们需要它来显示从AJAX页面收到的HTML。

到目前为止，这是我们的代码......

$('a[data-toggle="user"]').hovercard({
  detailsHTML: 'Loading user details...',
  width: 350,
  cardImgSrc: 'http://ejohn.org/files/short.sm.jpg', //Dummy URL for now
  onHoverIn: function() {
    // set your twitter id
    var user = 'jeresig';

    $.ajax({
      url: '/components/users/_hovercards/user-hovercard.php',
      type: 'GET',
      dataType: 'text',
      beforeSend: function() {
        $(this).text("Loading...");
      },
      success: function(data) {
        $(this).empty();
        $(this).text(data);
      },
      complete: function() {

      },
      error: function() {
        //$(this).text("An error occured in loading the user hovercard");
        $(this).text("An error occured loading the user data...");
      }
    });
  }
});

问题是这不会将来自AJAX页面的HTML附加到hovercard。我已经尝试了一些更改来诊断故障，当我明确调用$（this）值并尝试在AJAX行之外手动更改它以测试手动附加数据时我最终用手动附加的html替换链接数据本身并且不显示悬浮卡。

我在代码中的几个位置使用全局选择器将事件应用于具有特定数据切换值的所有元素，并使用$（this）选择器没有问题，但在这种情况下我遇到了问题。 / p>

提前致谢。

Answer 1

这是因为$(this)与$('a[data-toggle="user"]')调用中的$.ajax不同。相反，$(this)引用了AJAX对象，它不会做任何事情。

以下是来自this answer的修改后的解决方案：

$('a[data-toggle="user"]').hovercard({
  ...
  var elem = $(this);
  $.ajax( ...
    success: function(data) {
      elem.empty();
      elem.text(data);
    } ...
    error: function() {
      elem.text("An error occured loading the user data...");
    }
  });
 }
});

Answer 2

你真是太近了！您需要做的唯一更改是使用：

.html('html');

或

.append('html');

在ajax调用定义中的SUCCESS设置中！

请注意，这会将HTML加载到DOM中，并在Ajax响应中执行任何<script>标记！我在写过的应用程序中做了很多。如果您有任何问题，请告诉我们！

您可以在此处找到更多信息：

.html（）--- http://api.jquery.com/html/

.append（）--- http://api.jquery.com/append/

jQuery Hovercard AJAX加载

2 个答案: