Bootstrap Popover显示相同的内容

Question

Has anyone worked with the bootstrap popover? I am facing a little difficulty implementing it.

I am creating movie thumbnails dynamically, and on mouseenter event, I am using the popover to display the details of the image. The problem is, the same details are displayed for all the images.

Here is some part of my code:

 <script>
    $(function () {
        $(".get-movies").click(getEventHandler);
    });

    function getEventHandler() {
        var name = $(".get-movie-name").val();

        $.ajax({
            url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=my_key&q=" + name + "&page_limit=5",
            dataType: "jsonp",
            success: function (response) {
                $(".display-movie").empty();
                var ul = $(".display-movie");
                for (var i = 0; i < response.movies.length; i++) {
                    var img = $("<img>").attr("src", response.movies[i].posters.original)
                                        .attr("id", i)
                                        .attr("data-placement", "right")
                                        .attr("class", "img-popover")
                                        .on("mouseover", response, getPopOver)
                                        .on("mouseout", hidePopOver)
                                     .css({
                                         width: 200,
                                         height: 200,
                                         margin: 20
                                     });

                    var div = $("<div>")
                        .append(img)
                    $("<li>")
                        .append(div)
                        .appendTo(ul);
                }
            }
        });
    }

    function getPopOver(info) {
        console.log(info);
        var image = '<img src = " ' +info.data.movies[info.target.id].posters.thumbnail+ ' " />';
        $(".img-popover").popover({
            title: info.data.movies[info.target.id].title,
            content: image,
            trigger: "hover",
            html: true
        })
    }


    function hidePopOver() {
        console.log("Leaving here");
        $(".img-popover").popover("hide");
    }
</script>

Answer 1

I think your:

var name = $(".get-movie-name").val();

will return the first item in the collection of items that match that class.

you might try:

var name = $('#' +this.id + ".get-movie-name").val();

but without seeing some of the html, I cannot be exact here.