Ajax click function doesn't work after load content

Question

I have following problem. If I generate anhor "load_more_btn" via ajax then click function (the one with alert('test') ) wont work. Why is this happens and how to solve this problem?

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

This is because you assign the click handler before your content is loaded. — Philip G, Feb 04 '15 at 12:43

score 2 · Answer 1 · answered Feb 04 '15 at 12:43

2

Understanding Event Delegation

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

If you are click to newly added item, nothing would happen. This is because of the directly bound event handler that we attached on load time. Direct events are only attached to elements at the time the .on() method is called. In this case, add more button did not exist when document is loaded.

answered Feb 04 '15 at 12:43

Sadikhasan

18,365
21
80
122

Perhaps a comment as to why this solves the issue? And don't just link a page, links change over time. – Styphon Feb 04 '15 at 12:45
This works. Thank you. Could you also explain me this somehow ? – Feb 04 '15 at 12:45
I updated my answer with explaination and link for manual where you can read. – Sadikhasan Feb 04 '15 at 12:50

score 0 · Answer 2 · answered Feb 04 '15 at 12:44

0

This is because you assign the click handler before your content is loaded.

You should try using .on() instead:

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

This assigns the handler to the document instead. And tries to find #load_more_btn onClick instead!

answered Feb 04 '15 at 12:44

Philip G

4,098
2
22
41

@Styphon no it is not: http://api.jquery.com/on/ cite: "When a selector is provided, the event handler is referred to as delegated." – Philip G Feb 04 '15 at 12:47

Ajax click function doesn't work after load content

2 Answers2