jQuery 脚本没有修改元素的 src

Question

我有一个 jQuery 脚本，它试图在单击页面上的 img 后修改模态 window 中元素的 src。它获取被单击的 img 的 src 并尝试将 src 复制到模式弹出窗口中的元素 window.

我在脚本中进行了测试 alert(source); 以查看它是否有效。正如预期的那样，这会提醒用户正确的 src。不幸的是，根据 Chrome 浏览器中的 "Elements" 视图，之后 src 没有被赋予元素。

我正在尝试将 src 赋予 <modal> 标签中的一个元素。

<div id="screenings">
    <?php

           ...
        //database connection
           ...

        while ($row = mysqli_fetch_array($result)){
        echo "<div class='img_div'>";
        echo "<img id='unique' class='modal_img img_screenings' ng-click=\"vm.openModal('custom-modal-1')\" src='images/".$row['image']."' >";
        ...
            echo "</div>";
        }
    ?>

</div>

<modal id="custom-modal-1">
    <div class="modal">
        <div class="modal-body">
                <img id="popup_img" src="#">
        </div>
    </div>
    <div class="modal-background"></div>
</modal>

<script>
    $(".img_div").on("click", function() {
        var source = $(this).find('img').attr('src');
        alert(source);
        $('#popup_img').prop('src', this.src);
    });
</script>

还值得注意的是，其他地方还有其他代码正在修改 <modal> 元素。包含在 Angular 指令文件中，有这个，它采用模态并将其放在 </body> 标记的末尾：

   function Directive(ModalService) {

        ...

                // move element to bottom of page (just before </body>) so it can be displayed above everything else
                element.appendTo('body');

        ...

            });

这会对模态中未收到 src 的元素产生影响吗？

Answer 1

$(".img_div").on("click", function() {
    var source = $(this).find('img').attr('src');     
    $('#popup_img').attr('src', source);
});

jQuery 脚本没有修改元素的 src

jQuery script not modifying src of element

javascript

jquery

append

src

modal-window