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

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

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

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

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

Answer 2

将您的事件处理程序放入您的成功回调中，ajax调用应解决此问题。这是因为您的问题的注释中陈述的问题：在创建处理程序时，您绑定处理程序的DOM元素不存在。使用“on”将处理程序绑定到文档的另一个解决方案也正常工作。

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

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

无法在使用jQuery Ajax调用加载的div中选择一个元素

2 个答案: