append() 中的 JavaScript 单引号和双引号 - fullcalendar external-events

Question

我正在创建一个下拉菜单，它会生成几个外部事件（取决于您的选择），这些事件可以放在全日历上。我需要在 ajax 的成功部分将几个事件 div 附加到另一个 div。

问题是我无法在必须放在 append 函数中的字符串中正确写入单引号和双引号。

追加后的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) 中，然后在附加内容中使用它，但如果您想将数据事件内容直接放在附加函数中，没有问题。

下拉列表：

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

使用\' 将导致单引号被附加到字符串中，你会得到你想要的：

<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"}';