Question

我正在使用ajax动态编写html代码，这意味着如果有人点击按钮，我会编写html代码来链接数字。

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

这是插入html的javascript代码：

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

＆＃34; manage_figures＆＃34; function是一个在我的flask视图函数中调用的python函数。但是我们假设它插入的代码看起来像这样

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

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

我现在想要一个javascript函数，如果有人点击图像

就会触发

.Events(events => events.Change("onChange").DataBound("onDataBound"))

此功能永远不会被触发？这可能与页面加载时包含类pager_img的html代码不存在的事实有关？有人知道解决方案吗？谢谢卡尔

Answer 1

由于您是动态创建html元素，因此在附加html后需要注册click事件处理程序。

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

Answer 2

使用事件委派或在添加标记后添加事件。 https://learn.jquery.com/events/event-delegation/

动态的HTML和JavaScript函数

2 个答案: