jQuery append 函数只是附加 html 而不是与之相关的类

Posted 2023-03-14

【中文标题】jQuery append 函数只是附加 html 而不是与之相关的类

【英文标题】：jQuery append function is just appending the html but not the classes related to it

【发布时间】：2021-07-29 14:46:40

【问题描述】：

我正在使用 php laravel，所以它使用刀片模板来呈现视图。以下是附加 html 脚本的 javascript 代码：-

$(function () 
   var count = 0;
   $("#min_bonus_value").click(function () 
      count++;
      var min_bonus_html =
                    '<div class="min_bonus_row">' +
                        '<hr>' +
                        '<div class="row">' +
                            '<div class="col-md-2">' +
                                '<div class="form-group">' +
                                    '<label for="bonus_day[' + count + ']">@lang('admin.message759')<span class="text-danger">*</span></label>' +
                                    '<select class="select2 form-control" id="bonus_day[' + count + ']" name="bonus_day[' + count + '][]" data-placeholder="@lang('admin.message759')" multiple>' +
                                        '<option value="1">Monday</option>' +
                                        '<option value="2">Tuesday</option>' +
                                        '<option value="3">Wednesday</option>' +
                                        '<option value="4">Thursday</option>' +
                                        '<option value="5">Friday</option>' +
                                        '<option value="6">Saturday</option>' +
                                        '<option value="7">Sunday</option>' +
                                    '</select>' +
                                '</div>' +
                            '</div>' +
                        '</div>' +
                    '</div>';

以下是需要附加上述 html 的刀片模板代码，我想附加 'select2' 类，该类的样式为选择多天，但徒劳无功：-

<div id="minimum_bonus">
</div>

【问题讨论】：

我不明白这个问题。 <div id="minimum_bonus"> 应该代表什么？您要在其中附加代码的父元素？

除此之外，我希望 data-placeholder="@lang('admin.message759')" 会破坏您的 JS 语法，因为您在单引号中使用单引号。您的浏览器控制台是否报告任何错误？

如何追加？我们可以看到代码吗？

【参考方案1】：

我可能不在这里，但是当您说“不是类”时，您实际上是指 Javascript/jQuery 功能吗？

如果是这样，我将尝试解释发生了什么：当您初始化一个 jQuery 插件（如 select2）时，它会在您初始化它时作用于 DOM 中存在的内容。因此，如果您稍后创建新项目，这些将不具有 select2 功能，除非您为所述新项目再次初始化它。

我建议您创建一个函数来初始化 select2 并在您向 DOM 添加新元素时调用它。您需要以某种方式挑选出已经初始化的元素。您可以使用一个类来执行此操作，在此示例中，该类是“select2-enabled”。像这样：

function initSelect2() 
  $(".select2").each(function()
    if (!$(this).hasClass('select2-enabled')) 
      $(this).addClass('select2-enabled');
      $(this).select2(
        // all your select2 options
      );
    
  );

然后，在您附加新的 html 之后，您可以调用您的函数来初始化新元素上的 select2：

$(parentElement).append(newHTML);
initSelect2();