Question

我有以下问题。如果我生成anhor＆＃34; load_more_btn＆＃34;通过ajax然后点击功能（带警报的那个（＆＃39;测试＆＃39;））不会工作。为什么会发生这种情况以及如何解决这个问题？

<div id="content"></div>
<div id="load_more"></div>

        <script type="text/javascript">
        function getPhoto(paramType, param, page){
            $.ajax({
                url: "skrypt.php?paramType="+paramType+"&param="+param+"&page="+page
            }).done(function(data) {                            
                $('#content').html(data);
                var nextpage =page+1;
                $('#load_more').html('<a href="#" id="load_more_btn" data-paramType="'+paramType+'" data-param="'+param+'" data-page="'+nextpage+'"=>Wczytaj więcej</a>');
            });
        }

        $('#load_more_btn').click(function(){
                alert('test');
            });

    </script>

Answer 1

Understanding Event Delegation

$(document).on("click","#load_more_btn",function(){
   alert('test');
});

如果您点击新添加的项目，则不会发生任何事情。这是因为我们在加载时附加了直接绑定的事件处理程序。直接事件仅在调用.on（）方法时附加到元素。在这种情况下，加载文档时添加更多按钮不存在。

Answer 2

这是因为您在加载内容之前指定了点击处理程序。

你应该尝试使用.on（）代替：

$(document).on("click","#load_more_btn", function(){
                alert('test');
});

这会将处理程序分配给文档。并尝试在onClick上找到#load_more_btn！

加载内容后，Ajax点击功能不起作用

2 个答案: