Question

我正在尝试为包含图像的动态创建的div元素创建工具提示弹出窗口。我正在使用名为Powertip的jquery插件。

我目前的剧本并没有给我预期的结果。

<!-- language: lang-js -->
    <script type="text/javascript">
        $(document).ready(function () {
            $('.thumbnail-hoverable').each(function () {
                var mouseOnDiv = $(this);
                var imgsrc = mouseOnDiv.find("img").attr("src").toString();
                console.log(imgsrc);
                var tipContent

                $(function () {
                    tipContent = $('<div class="image-detail-popover"><div  class="img-p

opover-detail-container" style="border: 2px solid #cccccc; margin-bottom: 10px; width: 370px; height: 322px;display: table-cell; vertical-align: middle;"><img alt="test" class="clickable" src = "" style="max-height: 322px; max-width: 370px; display: block; margin: auto;" /><img alt="" src="Images/fowto-watermark.png" style="position: absolute; top: 0; left: 0; z-index: 9999999;" /></div></div>');
                        tipContent.find("div.img-popover-detail-container").children("img").attr("src", imgsrc);
                    });

                    console.log(tipContent.toString());
                    mouseOnDiv.data('powertipjq', tipContent);
                    mouseOnDiv.powerTip({
                        //placement: 'n',
                        mouseOnToPopup: true,

                    });

                    $("img.clickable").click(function () {
                        $(parent.document).find(".ticket-img-container").children("img").attr("src", imgsrc);
                        alert("clicked");
                        console.log("clicked");
                    });

                    $("div.img-popover-detail-container").mouseenter(function () {
                        $(parent.document).find(".ticket-img-container").children("img").attr("src", imgsrc);
                        alert("clicked div");
                        console.log("clicked div");
                    });
                });
            });
       </script>

具有类thumbnail-hoverable的div元素是使用asp转发器动态创建的。但是.each不起作用。实际上它一直工作到console.log（imgsrc）。我必须用.mouseenter替换.each，但这会破坏Powertip插件的使用，因为它已经这样做了。即使使用mouseenter，.click功能也不起作用。我需要单击弹出窗口中的元素以在主页面中设置其他元素。有人可以帮忙吗？

Answer 1

你错了;在var tipcontent

之后

Answer 2

您的代码存在多个问题。

在tipcontent初始化后首次丢失冒号。

var tipcontent ;
               ^--- Missing colon

没有关注点分离。（使你的JS清洁）。
为什么要使用$ .each绑定事件。

jquery中的.each（function（）{}）没有处理动态创建的div元素

2 个答案: