JQuery bind() method not working

Question

I make some code like this Ajax give me a pagination bar with the <a href="" class="page-navi page--4">4</a> for example. But bind and alert not working. Why?

    <script ... >
$(function() {
  $(".page-navi").bind("click",function() {
alert("!!!");
});
$.ajax(
    {
        url: "some url",
        type: "GET",
        success:function(data, status, jqxhr)
        {
            $("#pagination").html(data);
        },
        error: function (request, status, error) {
            console.log(request.responseText);
        }                        
    });
});
</script>

possible duplicate of [jQuery how to bind onclick event to dynamically added HTML element](http://stackoverflow.com/questions/1525664/jquery-how-to-bind-onclick-event-to-dynamically-added-html-element) — JJJ, Jul 11 '15 at 09:09

score 0 · Accepted Answer · answered Jul 11 '15 at 09:09

It looks like you are calling an ajax method to update your #pagination element immediately after loading.

If your .page-navi element is inside this #pagination element the event handler you attached via bind will be wiped out.

Move to inside the ajax success.

BMW · Answer 2 · 2015-07-11T13:16:51.390

-1

I test your code and works correctly without AJAX call. BIND is an old event handler, I suggest you to use ON. Just replace BIND with ON. The reason is that you are trying to attach event before the DOM elements would be loaded. I think my suggestion will help you.

edited Jul 11 '15 at 13:16

answered Jul 11 '15 at 09:26

BMW

9
2

JQuery bind() method not working

2 Answers2