append（） - fullcalendar外部イベントのJavaScript一重引用符と二重引用符

Question

私はフルカレンダーにドロップできるいくつかの外部イベント（選択に応じて）を生成するドロップダウンメニューを作成しています。私はajaxの成功の部分で別のdivにいくつかのイベントdivを追加する必要があります。

問題は、append関数に配置する必要がある文字列に、一重引用符と二重引用符を正しく書き込めないことです。私がしようと

$("#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 
       }); 
      }); 
     } 
    }); 
}); 

：

div要素が追記した後、このようにレンダリングする必要があります。

ここ

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

は、ドロップダウンリストの変化を聴くための機能であり、外部イベントを生成します必要なすべての値をvarialbe（eventdetails）に置き、追加コンテンツで使用しますが、データイベントのコンテンツを追加関数に直接配置したい場合は問題ありません。

ドロップダウンリスト：

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

へ

<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>'); 

\'を使用すると、単一引用符は文字列と、あなたに追加されますあなたが望むもので終わるでしょう：

<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> 

編集：

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