如何在新增DOM元素上使用jquery.mentionsInput实现@提及匹配功能？

故障原因 #

你当前的写法只能初始化页面加载时已存在的textarea.mention元素，动态新增的DOM元素不会自动绑定插件逻辑，是最常见的失效原因。

解决方案 #

• 调整初始化时机，在动态元素插入DOM后单独执行初始化
  新增元素后立刻调用插件初始化方法，示例如下：

  // 你的新增元素逻辑示例
  const newMentionTextarea = `<textarea class="mention" placeholder="请输入内容，@触发提及"></textarea>`
  document.body.append(newMentionTextarea) // 或插入到你需要的父容器内
  
  // 插入完成后给新增元素初始化提及插件
  $('textarea.mention:last').mentionsInput({
    onDataRequest: function (mode, query, callback) {
      var data = [
        { id: 1, name: 'First Name' },
        { id: 2, name: 'Second Name' }
      ]
      data = _.filter(data, function(item) {
       return item.name.toLowerCase().indexOf( query.toLowerCase() ) > -1
      })
      callback.call(this, data)
    }
  })
  

• 检查依赖加载顺序
  必须严格按照 jQuery → Underscore → jquery.mentionsInput 的顺序引入依赖，顺序错误会导致插件初始化失败，可打开浏览器控制台查看是否存在$ is not defined、_ is not defined或mentionsInput is not a function类报错。
• 已存在内容的识别
  如果你需要识别初始化前就已经填在输入框内的@格式内容，初始化后手动调用一次重置方法即可触发内容重检：

  $('textarea.mention').mentionsInput('reset')
  

• 触发规则校验
  插件默认触发提及的字符为@，输入@后需要紧跟非空格字符才会触发匹配逻辑，如有自定义触发字符需求可在初始化参数中补充triggerChar: '@'显式指定。

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