我想从数据库加载事件日历，返回值失去效果和日期不显示 - I want to load event calendar from Database, The return value lose effect and date does not show

我的javascript:

////////////////////////////// Events Loading  ///////////////
 $('body').on('click', '#eventbnt', function(e){
    e.preventDefault();
    //var container = $('#loadmorefollowers');
   // $(container).html('<img src="img/loader.gif">');
    var newhtml = '';
    //alert("yes")
    $.ajax({
      url: urllink,
      type: 'post',
      data: {'action': "events"},
      cache: false,
      success: function(json) {
          alert(json)
        newhtml =json;
        $('#ei-events').append(newhtml);
      },
      error: function(xhr, desc, err) {
        console.log(xhr + "'n" + err);
      }
    }); // end ajax call
  });

HTML:

<div id="ei-events">
            <div class="ei-event" data-start="2016-12-28 16:30" data-end="2014-12-28 19:20" data-loc="Madrid">
                <div class="ei-name">Lorem ipsum dolor</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consect ratatattatttt dadaddd haha</div>
            </div>
            <div class="ei-event" data-start="2016-09-29 16:30" data-end="2014-12-24 16:30" data-loc="London">
                <div class="ei-name">Lorem ipsum dolor</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing haha.</div>
            </div>
            <div class="ei-event" data-start="2016-10-1 22:30" data-end="2014-12-29 16:30" data-loc="Berlin">
                <div class="ei-name">Lorem ipsum dolor</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
            </div>
            <div class="ei-event" data-start="2016-10-21 22:30" data-end="2014-12-29 16:30" data-loc="Berlin">
                <div class="ei-name">Lorem ipsum dolor</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
            </div>
        </div>
       <a href="#" id="eventbnt"> Load More</a>

我的PHP:

$start = "2016-10-29 17:30";
$end = "2016-10-30 08:30";
if($action == "events"){
echo json_encode('<div class="ei-event" data-start="'.$start.'" data-end="'.$end.'" data-loc="London">
                <div class="ei-name">Club opening</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
            </div>
            <div class="ei-event" data-start="2016-10-22 17:30" data-end="2016-10-24 08:30" data-loc="Paris">
                <div class="ei-name">IT conf</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
            </div>');
}

事件在html页面中一起加载时显示良好;但是如果我通过JavaScript从PHP调用它，它就不会显示日历效果，Date也不会显示。HTML上的两个事件显示得很好，但是当我点击"eventbnt"加载PHP时。该效果不起作用，日期将不会同时显示变量中的一个。

请问，有什么问题吗?它是javascript不解释变量$startdate或PHP?

见附件，前两个事件加载默认HTML而最后两个加载时，我点击"加载更多"与"eventbnt"

修改PHP以返回一个合理的json数据结构，如下所示

if($action == "events"){
    $htm = '<div class="ei-event" data-start="'.$start.'" data-end="'.$end.'" data-loc="London">
                <div class="ei-name">Club opening</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
            </div>
            <div class="ei-event" data-start="2016-10-22 17:30" data-end="2016-10-24 08:30" data-loc="Paris">
                <div class="ei-name">IT conf</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
            </div>';
    echo json_encode(array('htm'=>$htm);
}

然后修改javascript

$('body').on('click', '#eventbnt', function(e){
    e.preventDefault();
    $.ajax({
        url: urllink,
        type: 'post',
        data: {'action': "events"},
        cache: false,
        dateType: 'json',
        success: function(json) {
            alert(json.htm)
            $('#ei-events').append(json.htm);
        },
        error: function(xhr, desc, err) {
            console.log(xhr + "'n" + err);
        }
    });
});