如何在innerHTML onclick事件中動態傳遞字符串參數

Question

我正在嘗試在函數名稱select_day中解析日期參數。 該函數在li元素onclick事件中聲明。 與下面的代碼，我得到這個錯誤：

參數列表后未捕獲到的SyntaxError：缺少）

這實際上是我要通過的日期。 我嘗試對參數進行硬編碼，它可以正常工作，但動態地它卻無法工作

if(selected_day == dates[i]){
             $(".dates_list").append( "<li class='active' onclick=\'select_day("+$.datepicker.formatDate( "dd M", dates[i])+")\'><span>Day "+day_count+"</span><p>"+$.datepicker.formatDate( "dd M", dates[i]) +"</p></li>" );
        }

我希望執行該功能。 有人可以幫忙嗎

Answer 1

使用.on('click'處理程序，而不是嘗試將要執行的Javascript代碼連接到onclick內聯處理程序中：

if(selected_day == dates[i]){
  const $li = $(`<li class="active"><span>Day ${day_count}</span><p>${$.datepicker.formatDate( "dd M", dates[i])}</p></li>`);
  $li.on('click', () => {
    select_day($.datepicker.formatDate("dd M", dates[i]));
  });
  $(".dates_list").append($li);
}

或者，更簡潔地說：

if(selected_day == dates[i]){
  const formattedDate = $.datepicker.formatDate( "dd M", dates[i]);
  $(`<li class="active"><span>Day ${day_count}</span><p>${formattedDate}</p></li>`)
    .on('click', () => {
      select_day(formattedDate, dates[i]);
    })
    .appendTo('.dates_list');
}

附加的JavaScript處理程序通常比一個更容易管理的on-屬性字符串。

Answer 2

您的問題是缺少左引號和右引號。

我建議您使用事件委托進行此操作，並建議您進行事件綁定，而不是將事件直接放入標記中。

同樣，您可以使用data屬性存儲日期。 此外，我添加了班級date-list以標識那些元素li 。

if (selected_day === dates[i]) {
    let html = "<li data-date='" + $.datepicker.formatDate("dd M", dates[i]) + "' class='date-list active'><span>Day " + day_count + "</span><p>" + $.datepicker.formatDate("dd M", dates[i]) + "</p></li>";
    $(".dates_list").append(html);
}

// Place this in somewhere different than the previous code-snippet 
// and execute it after the DOM is totally loaded
$('.dates_list').on("click", ".date-list", function() {
    select_day(this.data("date"));
});