append（）中的JavaScript單引號和雙引號 - fullcalendar外部事件

Question

我正在創建一個下拉菜單，它會生成幾個可以放在fullcalendar上的外部事件（取決於您的選擇）。我需要將幾個事件div附加到ajax成功部分的另一個div。

問題是我不能正確地寫入必須放置在附加函數中的字符串中的單引號和雙引號。

的DIV應該呈現這樣的附加後：

<div class='fc-event' data-event='{"id": 1, "title": "This is event 1"}'>My Event 1</div> 

這裏是聽的變化下拉列表中，並生成外部事件的功能：我嘗試

$("#category").change(function() { 

    $('#listAct').html(""); 

    $.ajax({ 
     type: "POST", 
     url: 'SearchActivities.php', 
     data: { CategoryName: $("#category").find("option:selected").val() }, 

     success: function (data) { 
      var result = $.parseJSON(data); 
      var arraysize = result.length; 
      var i, ActTitle; 

      for (i = 0; i < arraysize; i++) { 

       ActTitle = result[i]['ActTitle']; 

       var eventdetails = '{"id":1,"title":"This is event 1"}'; 

       $('#listAct').append('<div class="fc-event" data-event=' + eventdetails + '>' + ActTitle + '</div>'); 

      } 
      /* initialize the external events 
      -----------------------------------------------------------------*/ 
      $('#listAct').find('.fc-event').each(function() { 
       // make the event draggable using jQuery UI 
       $(this).draggable({ 
        zIndex: 999, 
        revert: true,  // will cause the event to go back to its 
        revertDuration: 0 // original position after the drag 
       }); 
      }); 
     } 
    }); 
}); 

將所有必需的值放入varialbe（eventdetails）中，然後將其用於附加內容中，但如果要將數據事件內容直接放入append函數中，則不存在任何問題。

下拉列表：

<form> 
    <label style="color: black" for="category">Select Category</label> 
    <select id="category" name="category"> 
     <option value=""></option> 
     <option value="Attractions, Nature Park">Attractions, Nature Park</option> 
     <option value="Underwater Activities">Underwater Activities</option> 
     <option value="Museums and Sites">Museums and Sites</option> 
    </select> 
</form> 

    <div id="listAct"> 
     <div class='fc-event' data-event='{"id": 1, "randomProperty": "foobar", "title": "This is event 1"}'>My Event 1</div> 
    </div> 

Answer 1

改變這一行

$('#listAct').append('<div class="fc-event" data-event=' + eventdetails + '>' + ActTitle + '</div>'); 

到

$('#listAct').append('<div class="fc-event" data-event=\'' + eventdetails + '\'>' + ActTitle + '</div>'); 

使用\'將導致單引號被附加到字符串和你最終會得到你想要的：

0123的

<div class='fc-event' data-event='{"id": 1, "title": "This is event 1"}'>My Event 1</div> 

代替

<div class='fc-event' data-event={"id": 1, "title": "This is event 1"}>My Event 1</div> 

編輯：使用一個名爲在eventdetails變量title變量，使用

var eventdetails = '{"id":1,"' + title + '":"This is event 1"}';