当列表获得新项目时触发事件

Posted 2023-05-09

【中文标题】当列表获得新项目时触发事件

【英文标题】：Fire an event when a liste get new item

【发布时间】：2021-04-11 12:44:53

【问题描述】：

我有一个空列表：

<ul id="select2-choices"></ul>

这个列表使用 ui 获取添加到其中的元素，所以我得到了这个：

 <ul id="select2-choices">
   <li>item1</li>
   <li>item2</li>
 </ul>

我想触发一个事件，以便在该列表获得新项目时调用一个函数：

$("#select2-choices").on("Thevent", function (e))
            self.SetDefaultTeam(e);
        );

怎么做？

【问题讨论】：

将内容添加到 DOM 时不会引发事件。您是否控制附加新 li 元素的 JS 代码？如果是这样，您可以使用trigger() 手动引发事件。如果你不控制 JS，那么你可以使用 MutationObserver

什么创建列表项以及如何创建？您遗漏了问题的重要部分。

【参考方案1】：

您可以使用如下所示的变异观察者。代码已注释。我创建了一个按钮来模拟新项目的添加，但突变观察者是识别 DOM 树中变化的函数。

注意如果您有权访问添加新 li 的代码，那么最好从那里触发您的函数。

如果您还希望有别的东西，请告诉我。

---

// Create a button to add options to mimic your functionality
$("#add-li").click(function() 
  $("ul#select2-choices").append("<li>New</li>");
);

// Create mutation observer
var observer = new MutationObserver(function(mutations) 
  
    // Something has changed in the #select2-choices
    console.log("Change noticed in childList");
    
);

// Just look out for childList changes
var config = 
  attributes: false,
  childList: true,
  characterData: false
;

// Select target
var target = document.querySelector('#select2-choices');

// Launch observer with above configuration
observer.observe(target, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="select2-choices">
</ul>

<button id="add-li">Add option</button>