JQuery якорь клик не работает

Question

Вот функция,

 <script type="text/javascript">
    $(document).ready(function() {
        getRecordspage(1, 5);
        $("a.page-numbers").click(function() {
            alert(1);
            getRecordspage($(this).text(), 5);
            return false;
        });
    });

И на моей странице я динамически добавляю якоря к этому div,

<div id="pager" class="pager">
//my anchors will be present here...
</div>

Я добавляю якоря динамически ... Все якоря будут иметь class="page-numbers" ... Как это можно сделать ...

При проверке через firebug у моего пейджерного дива было такое, когда я нажимал 3,

<div class="pager" id="pager">
<a class="page-numbers prev" href="#">Prev</a>
<a class="page-numbers" href="#">1</a>
<a class="page-numbers" href="#">2</a>
<span class="page-numbers current">3</span>
<a class="page-numbers" href="#">4</a>
<a class="page-numbers next" href="#">Next</a></div>

EDIT:

Я использую jquery 1.4 ...

function getRecordspage(curPage, pagSize) {
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetRecords",
        data: "{'currentPage':" + curPage + ",'pagesize':" + pagSize + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(jsonObj) {
            var strarr = jsonObj.d.split('##');
            var jsob = jQuery.parseJSON(strarr[0]);
            var divs = '';
            $.each(jsob.Table, function(i, employee) {
                divs += '<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>';
            });
            $("#ResultsDiv").append(divs);
            $(".pager").pagination(strarr[1], { 
                current_page: curPage - 1, items_per_page: '5', num_display_entries
: '5', next_text: 'Next', prev_text: 'Prev', num_edge_entries: '1'
            });
            $(".resultsdiv:even").addClass("resultseven");
            $(".resultsdiv").hover(function() {
                $(this).addClass("resultshover");
            }, function() {
                $(this).removeClass("resultshover");
            });
        }
    });

Answer 1

Используйте .live():

$("a.page-numbers").live('click',function() {
        alert(1);
        getRecordspage($(this).text(), 5);
        return false;
});

или выполните ваше назначение обработчика после , когда вы создали ссылки.Если при выполнении этой функции нет элементов с классом page-numbers, то, конечно, ничего не происходит.

Но live() позаботится об этом:

Описание : прикрепить обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас или в будущем.

Обновление:

Ну, яТочно сказать не могу.Одна вещь, которую вы можете попробовать, это переместить вашу функцию в функцию успеха вызова Ajax:

function getRecordspage(curPage, pagSize) {
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetRecords",
        data: "{'currentPage':" + curPage + ",'pagesize':" + pagSize + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(jsonObj) {
            // .. lot of stuff here..
            // at  the end:
            $("a.page-numbers").click(function() {
                alert(1);
                getRecordspage($(this).text(), 5);
                return false;
            }
       }
   });
}

Answer 2

вы должны использовать .live, когда будете динамически добавлять элементы.

<script>
   $(document).ready(function() {
      getRecordspage(1, 5);
        $("a.page-numbers").live('click', function() {
            alert(1);
            getRecordspage($(this).text(), 5);
            return false;
      });
   });
</script>

Answer 3

Вы должны использовать jquery 1.42 и .delegate() вместо .live():

$("a.page-numbers").delegate('click', 'a.page-numbers', function(){
    alert('1');
});