php - 无法选择使用 jQuery Ajax 调用加载的 div 内的元素

Question

处理项目，使用 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>";
}
?>*

可能是什么问题？

Answer 1

由于您要动态加载元素，因此您将需要使用委托(delegate)而不是绑定(bind)。

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

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

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