如何在FullCalendar弹窗超链接中获取client_id变量

我在用FullCalendar.io开发功能，尝试把现有预约关联到对应的client_id时，没法在超链接里拿到这个变量。这个变量能正常显示在id为modalclient_id的弹窗div里，但就是加不到超链接里，求解决！

现有代码 #

index.php #

<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Detalhes:</h4>
        </div>
        <div id="modalBody" class="modal-body">
        <div id="modalTitle" class="modal-title"></div>
        <div id="modalclient_id"></div>
        <div id="modalStatus" style="margin-top:5px;"></div>

        <a id="lnkTarget" href="#">List all appointments</a>

<script type="text/javascript">    
var x = "/schedule/list-appointments.php?id=";

var y = $('#modalclient_id').html(); // this gets what's inside <div>here</div>
//var y= $('#modalClientID').val('event.client_id');
//var y = $(this).attr('#client_id');
//var y = $(this).attr('client_id');
//var y= $("#client_id").text();


var result = x + y;
$('#lnkTarget').attr('href', result);
 });
    });

</script>

script.js #

$(document).ready(function(){
        var calendar = $('#calendar').fullCalendar({
            header:{
                left: 'prev,next today',
                center: 'title',
                right: 'agendaWeek,agendaDay'
            },
            defaultView: 'agendaWeek',
            //defaultView: 'agendaDay',
            editable: true,
            selectable: true,
            allDaySlot: false,
            
            events: "index.php?view=1",
   
            
            eventClick:  function(event, jsEvent, view) {
                endtime = $.fullCalendar.moment(event.end).format('h:mm');
                starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
                var mywhen = starttime + ' - ' + endtime;
                
                $('#modalTitle').html(event.title);
        $('#modalStatus').html(event.status);
                $('#modalclient_id').text(event.client_id);
                $('#modalWhen').text(mywhen);
                $('#eventID').val(event.id);
                $('#calendarModal').modal();
            },
            
            //header and other values
            select: function(start, end, jsEvent) {
                endtime = $.fullCalendar.moment(end).format('h:mm');
                starttime = $.fullCalendar.moment(start).format('dddd, MMMM Do YYYY, h:mm');
                var mywhen = starttime + ' - ' + endtime;
                start = moment(start).format();
                end = moment(end).format();
                $('#createEventModal #startTime').val(start);
                $('#createEventModal #endTime').val(end);
        $('#createEventModal #when').text(mywhen);
                $('#createEventModal').modal('toggle');
           },
           eventDrop: function(event, delta){
               $.ajax({
                   url: 'index.php',
                   data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id ,
                   type: "POST",
                   success: function(json) {
                   //alert(json);
                   }
               });
           },
           eventResize: function(event) {
               $.ajax({
                   url: 'index.php',
                   data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id,
                   type: "POST",
                   success: function(json) {
                       //alert(json);
                   }
               });
           }
        });
               
       $('#submitButton').on('click', function(e){
           // We don't want this to act as a link so cancel the link action
           e.preventDefault();
           doSubmit();
       });
       
       $('#deleteButton').on('click', function(e){
           // We don't want this to act as a link so cancel the link action
           e.preventDefault();
           doDelete();
       });
       
       function doDelete(){
           $("#calendarModal").modal('hide');
           var eventID = $('#eventID').val();
           $.ajax({
               url: 'index.php',
               data: 'action=delete&id='+eventID,
               type: "POST",
               success: function(json) {
                   if(json == 1)
                        $("#calendar").fullCalendar('removeEvents',eventID);
                   else
                        return false;
                    
                   
               }
           });
       }
       function doSubmit(){
           $("#createEventModal").modal('hide');
           var title = $('#title').val();
           var startTime = $('#startTime').val();
           var endTime = $('#endTime').val();
           var status = $('#status').val();  /// added.
           var client_id = $('#client_id').val();  /// added.
           var active = $('#active').val();  /// added.
           var added_user = $('#added_user').val();  /// added.
           
           $.ajax({
               url: 'index.php',
               data: 'action=add&title='+title+'&start='+startTime+'&end='+endTime+'&status='+status+'&client_id='+client_id+'&active='+active+'&added_user='+added_user, //added
               type: "POST",
               success: function(json) {
                   $("#calendar").fullCalendar('renderEvent',
                   {
                       id: json.id,
                       title: title,
                       start: startTime,
                       end: endTime,
                       status: status,
                       client_id: client_id,
                       active: active,
                       added_user: added_user
                   },
                   true);
               }
           });
           
       }
    });

问题原因 #

1. 时序错误：修改超链接的脚本在页面加载时就执行了，此时modalclient_id还未被填充值（只有点击事件后才会写入client_id）
2. 语法错误：index.php中的脚本存在多余的闭合括号});，会导致JS报错，中断代码执行

解决方法 #

直接在eventClick回调中使用event.client_id设置超链接，无需从DOM中读取，既避免时序问题，又更可靠。

修改后的代码 #

script.js（eventClick部分）

eventClick:  function(event, jsEvent, view) {
    endtime = $.fullCalendar.moment(event.end).format('h:mm');
    starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
    var mywhen = starttime + ' - ' + endtime;
    
    $('#modalTitle').html(event.title);
    $('#modalStatus').html(event.status);
    $('#modalclient_id').text(event.client_id);
    $('#modalWhen').text(mywhen);
    $('#eventID').val(event.id);
    
    // 直接用event里的client_id设置超链接
    var linkUrl = "/schedule/list-appointments.php?id=" + event.client_id;
    $('#lnkTarget').attr('href', linkUrl);
    
    $('#calendarModal').modal();
},

清理后的index.php（移除多余脚本）

<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Detalhes:</h4>
        </div>
        <div id="modalBody" class="modal-body">
        <div id="modalTitle" class="modal-title"></div>
        <div id="modalclient_id"></div>
        <div id="modalStatus" style="margin-top:5px;"></div>

        <a id="lnkTarget" href="#">List all appointments</a>
        </div>
    </div>
</div>
</div>

内容的提问来源于stack exchange，提问作者Ronaldo