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

与on-属性字符串相比，附加有Javascript的处理程序通常要容易得多。

Answer 2

您的问题是缺少左引号和右引号。

我建议您event-delegation做到这一点，以及拥抱事件绑定，而不是将事件直接放入标记中。

同样，您可以使用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"));
});

如何在innerHTML onclick事件中动态传递字符串参数

2 个答案: