jQuery script not modifying src of element

Question

I have a jQuery script that is trying to modify the src of an element within a modal window once an img on the page is clicked. It grabs the src of the img that is clicked and attempts to copy that src to an element in a modal pop-up window.

I've put in a test alert(source); within the script just to see if it's working. As expected, this alerts to the user the correct src. Unfortunately, the src is not given to the element afterward, according to the "Elements" view in the Chrome browser.

I'm trying to give the src to an element within the <modal> tags.

<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>

It's worth also noting that there is other code elsewhere that is modifying the <modal> element. Contained within an Angular directive file, there is this, which takes the modal and puts it at the end of the </body> tag:

   function Directive(ModalService) {

        ...

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

        ...

            });

Could that have an effect on the element within the modal not receiving the src?

Have you tried `$('#popup_img').attr('src', this.src);` instead? — webbm, May 14 '17 at 22:21
Result appears to be the same - the `src` in `` appears unchanged after click. — rpivovar, May 14 '17 at 22:24
Be aware of `prop` in conjunction with `src` attribute. If `src` is empty it will return your page URL. — max, May 14 '17 at 22:34

score 2 · Accepted Answer · answered May 14 '17 at 22:29

2

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

answered May 14 '17 at 22:29

Nanhe Kumar

15,498
5
79
71

jQuery script not modifying src of element

1 Answers1