dynamic html and javascript functions

Question

I am writing html code dynamically using ajax, meaning if somebody clicks a button I write the html code to link the figures.

This is the html code.

<a class="show_figures" id="show_figures0" loop-id="0" href="javascript:showOrHidefigure(0);" style="text-decoration: none;"><b>Show figures</b></a>

this is the javascript code to insert the html:

<script type='text/javascript'>
    function showOrHidefigure(id_dummy){

        var div = document.getElementById(id_dummy+'figures');
        var dummy_id = $('#show_figures'+id_dummy).attr('loop-id') + 'figures'
        var button = document.getElementById('show_figures'+id_dummy);
        if(div.style.display == "block"){
            div.style.display = "none";
            button.innerHTML = "<b>Show figures</b>";
        }
        else{
            div.style.display = "block";
            if(!document.getElementById($('#show_figures'+id_dummy).attr('data-id')+'displayfigures')){

                div.innerHTML = "Downloading Figures<br><br>"
                button.innerHTML = "<b>Hide figures</b>";

                $.ajax({
                    url: "/manage_figures",
                    type: "GET",
                    async: true,
                    cache: false,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    data: { arXiv_id: $('#show_figures'+id_dummy).attr('data-id')}, 
                    success: function(data) {
                        if(data.error){
                            console.log("error = ", data.error)
                        }
                        else{
                            document.getElementById(dummy_id).innerHTML = data.success
                        }
                    },
                });
            }
            else{
                button.innerHTML = "<b>Hide figures</b>";
            }
        }
    } 
</script>

The "manage_figures" function is a python function called in my flask views function. But lets assume the code it inserts looks like this

<div id="0displayfigures" value="1" style="display: inline-block">
     <figure><a href="#"><img class="paper_img" src="/static/sourcefiles/image.png" alt="figure"/></a></figure>
</div>

I now want to have a javascript function which gets triggered if somebody clicks on the image

<script>
    $(document).ready(function(){
        $('.paper_img').click(function(){

            console.log("test")
        });
    });
</script>

This function never gets triggered? Which probably has to do with the fact that the html code which contains the class pager_img did not exist when the page loaded? Does anybody know a solution for this? thanks carl

score 1 · Accepted Answer · answered Nov 13 '15 at 22:08

1

Since you are creating the html elements dynamically, you need to need to register the click event handler after you append the html.

    $(document).on("click",".paper_img",function(){
       alert("test");
    });

answered Nov 13 '15 at 22:08

DinoMyte

8,737
1
19
26

score 0 · Answer 2 · answered Nov 13 '15 at 21:57

0

Use event delegation or add the events after you added the markup. https://learn.jquery.com/events/event-delegation/

answered Nov 13 '15 at 21:57

jan

138
2
10

dynamic html and javascript functions

2 Answers2