0

使用项目，使用 ajax 调用从 php 文件加载日历。当我尝试触发写在加载表上的事件时，它似乎不起作用。

请帮我。

$.ajax({
    url: 'calender.php',
    type: 'GET',
    success: function(res){
        $("#calender").html(res);
    }
});

$("#prev").click(function(){
    console.log(this);
});

PHP代码在这里。

*<?php
$monthNames = Array("January", "February", "March", "April", "May", "June", "July", 
"August", "September", "October", "November", "December");

if (!isset($_REQUEST["month"])) $_REQUEST["month"] = date("n");
if (!isset($_REQUEST["year"])) $_REQUEST["year"] = date("Y");

$cMonth = $_REQUEST["month"];
$cYear = $_REQUEST["year"];

$prev_year = $cYear;
$next_year = $cYear;
$prev_month = $cMonth-1;
$next_month = $cMonth+1;

if ($prev_month == 0 ) {
    $prev_month = 12;
    $prev_year = $cYear - 1;
}
if ($next_month == 13 ) {
    $next_month = 1;
    $next_year = $cYear + 1;
}
?>
<table width="300">
<tr align="center">
<td bgcolor="#999999" style="color:#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="left"><a id="prev" title="<?php echo $prev_month."|".$prev_year; ?>" href="javascript:void(0);" style="color:#FFFFFF">Previous</a></td>
<td width="50%" align="right"><a id="next" title="<?php echo $next_month."|".$next_year; ?>" href="javascript:void(0);" style="color:#FFFFFF">Next</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="100%" border="0" cellpadding="5" cellspacing="0" id="calen">
<tr align="center">
<td colspan="7" bgcolor="#999999" style="color:#FFFFFF"><strong><?php echo $monthNames[$cMonth-1].' '.$cYear; ?></strong></td>
</tr>
<tr>
<th align="center" bgcolor="#FFB102" style="color:#FFFFFF">S</th>
<th align="center" bgcolor="#FFB102" style="color:#FFFFFF">M</th>
<th align="center" bgcolor="#FFB102" style="color:#FFFFFF">T</th>
<th align="center" bgcolor="#FFB102" style="color:#FFFFFF">W</th>
<th align="center" bgcolor="#FFB102" style="color:#FFFFFF">T</th>
<th align="center" bgcolor="#FFB102" style="color:#FFFFFF">F</th>
<th align="center" bgcolor="#FFB102" style="color:#FFFFFF">S</th>
</tr>
<?php 
$timestamp = mktime(0,0,0,$cMonth,1,$cYear);
$maxday = date("t",$timestamp);
$thismonth = getdate ($timestamp);
$startday = $thismonth['wday'];
for ($i=0; $i<($maxday+$startday); $i++) {
    if(($i % 7) == 0 ) echo "<tr>";
    if($i < $startday){
        echo "<td></td>";
    }else{
        $currentDay = date("d");
        $presentDay = $i-$startday+1;
        if($presentDay == $currentDay){
            echo "<td class='current' align='center' valign='middle' height='20px'><a title='".($i - $startday + 1)."' href='javascript:void(0);'>". ($i - $startday + 1) . "</a></td>";
        }else if($presentDay < $currentDay){
            echo "<td align='center' valign='middle' height='20px'>". ($i - $startday + 1) . "</td>";
        }else{
            echo "<td align='center' valign='middle' height='20px'><a title='".($i - $startday + 1)."' href='javascript:void(0);'>". ($i - $startday + 1) . "</a></td>";
        }
    }
    if(($i % 7) == 6 ) echo "</tr>";
}
?>*

可能是什么问题？

4

2 回答 2

5

由于您正在动态加载元素，因此您需要使用委托而不是绑定。

$(document).on('click', '#prev', function(){
    console.log(this);
});

假设在执行以下代码时 dom 中存在“#calendar”，请使用以下代码。将委托事件处理程序绑定到可能的最近的 DOM 元素。

$("#calender").on('click', '#prev', function(){
    console.log(this);
});)
于 2013-09-10T12:27:06.767 回答
2

将您的事件处理程序放入 ajax 调用的成功回调中应该可以解决这个问题。这是因为在对您的问题的评论中陈述的问题是：您将处理程序绑定到的 DOM 元素在创建处理程序时不存在。使用“on”将处理程序绑定到文档的另一种解决方案也在起作用。

编辑：如对我的回答的评论中所述，当多次调用此 ajax 调用时，请注意不要创建重复的事件处理程序。

$.ajax({
    url: 'calender.php',
    type: 'GET',
    success: function(res){
        $("#calender").html(res);
        $("#prev").click(function(){
            console.log(this);
        });
    }
});
于 2013-09-10T12:28:23.170 回答