щелчок привязки jQuery, кажется, не работает
Вот функция,
<script type="text/javascript">
$(document).ready(function() {
getRecordspage(1, 5);
$("a.page-numbers").click(function() {
alert(1);
getRecordspage($(this).text(), 5);
return false;
});
});
И на моей странице я добавляю привязки динамично этому отделению,
<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>
Править:
Я использующий 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 :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <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");
});
}
});
3 ответа
Используйте .live () :
$("a.page-numbers").live('click',function() {
alert(1);
getRecordspage($(this).text(), 5);
return false;
});
или выполните назначение обработчика после создания ссылок. Если при выполнении этой функции нет элементов с классом номеров страниц , то, конечно, ничего не происходит.
Но 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;
}
}
});
}
вам следует использовать jquery 1.42 и .delegate () вместо .live () :
$("a.page-numbers").delegate('click', 'a.page-numbers', function(){
alert('1');
});
вы должны использовать .live при динамическом добавлении элементов.
<script>
$(document).ready(function() {
getRecordspage(1, 5);
$("a.page-numbers").live('click', function() {
alert(1);
getRecordspage($(this).text(), 5);
return false;
});
});
</script>