Jquery html() 不起作用，但 text() 可以

Question

嘿，我在 jquery 的 ajax 事件和 html() 方面遇到了一个奇怪的问题。我正在为某事构建日历/事件，除了 html() 位之外，一切正常。 这是代码，（抱歉，有点长）

Jquery：

$(function() {
 var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
 var days = new Array('S', 'M', 'T', 'W', 'T', 'F', 'S');
 var date = new Date();

$('#next').click(function() {       
    //gets current year from page
    var curMon = $('#month').text();
    for(var i in months) {
        if(months[i] == curMon) {
            //if not dec, increment i
            if(i != 11) {
                i++;
            } else {
            //else, back to jan and increment year
                i = 0;
                var curYear = $('#year').text();
                curYear = parseInt(curYear) + 1;
                curYear = curYear.toString();
                $('#year').text(curYear);
            }
            $('#month').html(months[i]);
            var yy = parseInt( $('#year').text() );
            var days = daysInMonth(i, yy);
            //clear all the dates
            $('.day').each(function() {
                $(this).text('');
            });
            $.ajax({
               type: "POST",
               url: "some.php",
               data: "month="+months[i],
               success: function(msg){
                 $('#month_fields').html(msg);
               }
             });                
            var firstDay = new Date(months[i]+', 1 ' + yy);
            firstDay = firstDay.getDay();
            var j = 1;
            while(j <= days) {
                //fills in dates starting in the correct spot
                $('.day').eq(firstDay).text(j);
                firstDay++;
                j++;
            }

        }

    }
});

$('#prev').click(function() {
    var curMon = $('#month').text();
    for(var i in months) {
        if(months[i] == curMon) {
            if(i != 0) {
                i--;
            } else {
                i = 11;
                var curYear = $('#year').text();
                curYear = parseInt(curYear) - 1;
                curYear = curYear.toString();
                $('#year').text(curYear);
            }
            $('#month').html(months[i]);
            var yy = parseInt( $('#year').text() );
            var days = daysInMonth(i, yy);
            $('.day').each(function() {
                $(this).text('');
            });
            $.ajax({
               type: "POST",
               url: "some.php",
               data: "month="+months[i],
               success: function(msg){
                 $('#month_fields').html(msg);
               }
             });                
            var firstDay = new Date(months[i]+', 1 ' + yy);
            firstDay = firstDay.getDay();
            var j = 1;
            while(j <= days) {
                $('.day').eq(firstDay).text(j);
                firstDay++;
                j++;
            }
        }
    }
});});

一些.php：

    <?php
ob_start();     
    $cal_months = array(
    "January" => "01",
    "February" => "02",
    "March" => "03",
    "April" => "04",
    "May" => "05",
    "June" =>"06",
    "July" => "07",
    "August" => "08",
    "September" => "09",
    "October" => "10",
    "November" => "11",
    "December" => "12",
    );
    $fs = $_POST['month'];
    $thismonth = ( int ) $cal_months[$fs];
    $thisyear = date( "Y" );
    $numdaysinmonth = cal_days_in_month( CAL_GREGORIAN, $thismonth, $thisyear );
    $jd = cal_to_jd( CAL_GREGORIAN, $cal_months[$fs],date( 1 ), date( "Y" ) );
    $startday = jddayofweek( $jd , 0 );
    $monthname = jdmonthname( $jd, 1 );

$emptycells = 0;
for( $counter = 0; $counter <  $startday; $counter ++ ) {
    echo "\t\t<td class='padding'></td>\n";
    $emptycells ++;
}
$rowcounter = $emptycells;
$numinrow = 7;

for( $counter = 1; $counter <= $numdaysinmonth; $counter ++ ) {
    $rowcounter ++;

    if($counter == $thisday){
        echo "\t\t<td class='today'>$counter</td>\n"; // add class for today
    } else {
        echo "\t\t<td class='cal_nums'>$counter</td>\n";
    }

    if( $rowcounter % $numinrow == 0 ) {
        echo "\t</tr>\n";
        if( $counter < $numdaysinmonth ) {
            echo "\t<tr>\n";
        }
        $rowcounter = 0;
    }
}
$numcellsleft = ($numinrow - $rowcounter);
if( $numcellsleft != $numinrow ) {
    for( $counter = 0; $counter < $numcellsleft; $counter ++ ) {
        echo "\t\t<td class='padding'></td>\n";
        $emptycells ++;
    }
}   
$raw = ob_get_contents();
$eventarray[] = array(          
"month" => 5,           
"day" => 1,             
"title" => "April Fools",               
"desc" => "Have fun with those practical jokes!"                
);                      
$eventarray[] = array(          
"month" => 6,           
"day" => 4,             
"title" => "Easter",            
"desc" => "Easter Sunday"               
);                      
$eventarray[] = array(          
"month" => 7,           
"day" => 22,            
"title" => "Earth Day",                 
"desc" => "Protect the environment - Remember to keep the river and parks clean"                
);                      
$eventarray[] = array(          
"month" => 8,           
"day" => 9,             
"title" => "Mother's Day",              
"desc" => ""            
);                      
$eventarray[] = array(          
"month" => 9,           
"day" => 30,            
"title" => "Memorial Day",              
"desc" => ""            
);
foreach($eventarray as $value){
    if($value['month'] == $cal_months[$fs]){
        $raw = str_replace("<td class='cal_nums'>".$value['day']."</td>","<td class='date_has_event'>".$value['day']."\r\n\t\t<div class='events_info'>\r\n\t\t<ul><li><span class='title'>".$value['title']."</span><span class='desc'>".$value['desc']."</span></li></ul>\r\n\t\t</div>\r\n\t\t</td>",$raw);
    }
}
ob_clean();
echo $raw;
?>

所以，当我将 ajax 响应设置为 .html(msg) 时，它只给我日历月的最后一部分：

   <div id="month_fields">
    <td class="cal_nums">29</td>
    <td class="cal_nums">30</td>
    <td class="cal_nums">31</td>
    <td class="padding"></td>
    <td class="padding"></td>
    <td class="padding"></td>
    <td class="padding"></td>
   </div>

但是当我将其设置为 .text(msg) 时，我得到了 $raw 的全部内容：

<td class='date_has_event'>1 <div class='events_info'> <ul><li><span class='title'>April Fools</span><span class='desc'>Have fun with those practical jokes!</span></li></ul> </div> </td> <td class='cal_nums'>2</td> <td class='cal_nums'>3</td> <td class='cal_nums'>4</td> <td class='cal_nums'>5</td> <td class='cal_nums'>6</td> <td class='cal_nums'>7</td> </tr> <tr> <td class='cal_nums'>8</td> <td class='cal_nums'>9</td> <td class='cal_nums'>10</td> <td class='cal_nums'>11</td> <td class='cal_nums'>12</td> <td class='cal_nums'>13</td> <td class='cal_nums'>14</td> </tr> <tr> <td class='cal_nums'>15</td> <td class='cal_nums'>16</td> <td class='cal_nums'>17</td> <td class='cal_nums'>18</td> <td class='cal_nums'>19</td> <td class='cal_nums'>20</td> <td class='cal_nums'>21</td> </tr> <tr> <td class='cal_nums'>22</td> <td class='cal_nums'>23</td> <td class='cal_nums'>24</td> <td class='cal_nums'>25</td> <td class='cal_nums'>26</td> <td class='cal_nums'>27</td> <td class='cal_nums'>28</td> </tr> <tr> <td class='cal_nums'>29</td> <td class='cal_nums'>30</td> <td class='cal_nums'>31</td> <td class='padding'></td> <td class='padding'></td> <td class='padding'></td> <td class='padding'></td> 

我认为这与 php 文件有关，但为什么 html 和 text 会输出不同的东西？

Answer 1

我怀疑缺乏

content-type

的响应可能会破坏事情。添加

dataType: 'html'

以及

ajax()

的其他选项

$.ajax({
   type: "POST",
   url: "some.php",
   data: "month="+months[i],
   success: function(msg){
     $('#month_fields').html(msg);
   },
   dataType : "html"
 });