javascript - 类事件只触发一个

Question

带有链接的数据表

<strong>1</strong> <a href ='index.cgi?reqpage=2&job_category_id=1' class='paginateAdmin' id='nonItPaginate'>nextPage</a> 

$(document).ready(function () {
    $('.paginateAdmin').on('click', function (e) {
        e.preventDefault();
        var post = $(this).attr("href");
        var id = $(this).attr('id');
        var array = post.split('?');
        $.post(
            'index.cgi',
        array[1],
        function (data, status) {
            switch (id) {
                case "nonItPaginate":
                    $('#nonit').html(data);
                    break;
                case "ItPaginate":
                    $('#it').html(data);
                    break;
                case "govtPaginate":
                    $('#govt').html(data);
                    break;
                default:
            }
        });
    });
});

发布请求后，数据由链接组成

带有此链接的数据表

<strong>2</strong> <a href ='index.cgi?reqpage=3&job_category_id=1' class='paginateAdmin' id='nonItPaginate'>nextPage</a>

但是当我点击下一页时，点击事件不起作用。如果它有效，以便我可以获得响应数据

数据表

<strong>3</strong> <a href ='index.cgi?reqpage=4&job_category_id=1' class='paginateAdmin' id='nonItPaginate'>nextPage</a> 

但它没有触发事件。

Answer 1

这将只为所有具有类的现有元素$('.paginateAdmin').on('click', function(){})绑定事件。您需要改用这样的语法：clickpaginateAdmin$(document).on('click', '.paginateAdmin', function(){...

Answer 2

解决方案是

$(document).ready(function() {

     $(document).on('click','.paginateAdmin',
            function(e){
    e.preventDefault();
        var post = $(this).attr("href");
        var id=$(this).attr('id');
        var array = post.split('?');

    $.post(
        'index.cgi',
        array[1],
        function(data,status){

           switch(id)
            {
                case "nonItPaginate":

                     $('#nonit').html(data);

                    break;
                case "ItPaginate":

                         $('#it').html(data);
                        break;
                case "govtPaginate":

                     $('#govt').html(data);
                    break;
            default:

                 }


    });

    });
     });