append（）中的JavaScript单引号和双引号-fullcalendar外部事件

Question

I am creating a drop-down menu which generates several external-events (depending on your choice) that can be drop on the fullcalendar. I need to append several event divs to another div in the success part of ajax.

The problem is that I can't properly write the single and double quotes in the string that must be placed in the append function.

The div should be rendered like this after append:

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

Here is the function for listening to changes in drop-down list and generate external-events:

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

I try to place all the necessary values in a varialbe (eventdetails) and then use it in the append content but if you want to place the data-event content directly in the append function there is no problem.

The drop-down list :

<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

Change this line

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

to

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

Using \\' will cause the single quotes to be appended to the string and you'll end up with what you want:

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

instead of

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

Edit: To use a variable called title in the eventdetails variable, use

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