Question

我有我的jQuery代码，动态动态创建 image 和 li 元素。我想使用bootstrap工具提示，这样当我的鼠标悬停在该图像上时，该图像的细节应该显示在单独的工具提示中，如弹出窗口，但使用bootstrap工具提示。但是我无法弄清楚哪里出错了。这是我的代码：

   $.ajax({
            url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=XXXXXXXX&q=" + name + "&page_limit=5",
            dataType: "jsonp",
            success: function (response) {
                $(".display-movie").empty();
                var ul = $(".display-movie");
                console.log(response);
                for (var i = 0; i < response.movies.length; i++) {

                    var astart = $("<a>").attr("href", "#")
                                     .attr("rel", "tooltip")
                                     .append(img);
                    var img = $("<img>").attr("src", response.movies[i].posters.thumbnail)
                                        .css({
                                            width: 200,
                                            height: 200,
                                            margin: 20
                                        }).mouseover(function () {
                                            $("[rel='tooltip']").tooltip();
                                        })
                                          .append(aend);

                    var aend = $("</a>");
                    var div = $("<div></div>")
                        .append(astart)
                        .append(response.movies[i].title);
                    $("<li></li>")
                        .append(div)
                        .appendTo(ul);
                }
            }
        });

Answer 1

你以错误的方式追加元素。试试这个：

$.ajax({
    url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=48fv438wmjsh44bqutgd3gzn&q=" + name + "&page_limit=5",
    dataType: "jsonp",
    success: function(response) {
        $(".display-movie").empty();
        var ul = $(".display-movie");
        var ul_string = '';
        console.log(response);
        for (var i = 0; i < response.movies.length; i++) {
            ul_string +=
                '<li>' +
                    '<div>' +
                        '<a href="#" rel="tooltip">' +
                            '<img src="' + response.movies[i].posters.thumbnail + '" />' +
                        '</a>' +
                        response.movies[i].title +
                    '</div>' +
                '</li>';
        }

        ul.append(ul_string);
        ul.find('img').css({
            width: 200,
            height: 200,
            margin: 20
        });
        ul.find('[rel="tooltip"]').tooltip();
    }
});

Answer 2

您可以使用委派

var $movieDisplay = $(".display-movie");
$movieDisplay.tooltip({
  selector: '[rel=tooltip]'
});

$.ajax({
  url: 'http://host.tld',
  success: function(response) {
    // Use $movieDisplay here to avoid selecting it over and over again
    $movieDisplay.empty();
    ...
  }
});

<强>优点：

减少事件监听器，提高性能
$movieDisplay rel='tooltip'中的每个元素都会显示工具提示，无论它是在tooltip(options)调用之后还是之前创建的

查看实际操作：

http://jsfiddle.net/marionebl/P6XK5/1/

如何在鼠标悬停图像时使用引导工具提示

2 个答案: