TypeError：$（...）。modalForm不是函数

Question

这个问题有点长，很难解释，但是我会尽力而为。

我有一个待办事项网站，允许用户添加提醒。当用户右键单击提醒时，会弹出一个上下文菜单，其中包含诸如编辑，删除等选项。上下文菜单上的按钮根据用户选择的提醒而变化：

function toggleMenuOn(e) {
    if ( menuState !== 1 ) {
      menuState = 1;
      menu.classList.add( contextMenuActive );
    }

    let reminder_id = e.target.id

    $.ajax({
    url: '/ajax/get_reminder/',
    data: {
      'reminder_id': reminder_id
    },
    dataType: 'json', 
    success: function (data) {
        let context_btn1 = document.getElementById("context_menu_btn1");
        let reminder_pk = data.serialized_reminder.toString(); 
        let reminder_url = "{% url 'update-reminder' 0 %}".replace(/0/, reminder_pk) 
        context_btn1.className = "update-reminder context-menu__link btn btn-light";
        context_btn1.setAttribute('data-id', reminder_url);
        change_var(reminder_url)
    }  
  });

  }

let context_btn_id = "/update_reminder/0/";
function change_var(new_name) {
    context_btn_id = new_name;
}

$("#context_menu_btn1").click(function() {
    $(this).modalForm({formURL: context_btn_id});  
});

我遗漏了大多数其他代码，因为我只是在从事更新功能。

上下文菜单的HTML：

<nav id="context-menu" class="context-menu">
    <ul class="context-menu__items">
        <li class="context-menu__item">
            <button type="button" class="context-menu__link btn btn-light" id="context_menu_btn1" data-id=""><i class="fa fa-edit"></i> Edit</button>
            //When the context menu shows up the data-id changes to /update_reminder/<reminder-pk>/
        </li>
        <li class="context-menu__item">
            <button type="button" class="context-menu__link btn btn-light" id="context_menu_btn2" data-id=""><i class="fa fa-times"></i> Delete</button>
        </li> 
        <li class="context-menu__item">
            <button type="button"class="context-menu__link btn btn-light" id="context_menu_btn3" data-id=""><i class="fa fa-eye"></i> Share</button>
        </li>
    </ul>
</nav>

单击编辑按钮时，将弹出一个表格形式的模态，我使用django bootstrap modal forms。这是第一次工作，但是一旦context_menu_btn1的数据ID更改，它就会给出Uncaught TypeError: $(...).modalForm is not a function。有人问过类似的问题here，但解决方案说的我都有。我在引导之前加载了jquery，并确保没有两次加载jquery。

<!-- jQuery -->
<script type="text/javascript" src="{{ STATIC_URL }} /static/main/jquery-3.4.1.js"></script> 

{% load bootstrap4 %}
{% bootstrap_javascript %}
{% bootstrap_css %}

我认为它与多个jquery实例有关，因此第一个加载而第二个则没有。我该如何解决这个问题？任何帮助，将不胜感激！

编辑：这是Jeremy J Starcher's响应的添加代码：我检查了它的值，它是一个按钮，这就是我想调用的modalForm。我用带有事件的更新功能检查了这一点，这些事件有效，并且它们是相同的：

$(".update-event").each(function () {
  console.log($(this))
  $(this).modalForm({formURL: $(this).data('id')});
});

作为旁注，将为显示的每个按钮调用更新事件（每个提醒的侧面都有一个按钮），而上下文菜单中的查看提醒按钮会根据所单击的提醒而变化。我还发现，对于eacher（），每次context_btn_id更改时，formURL都不会更改。

注意：我使用的是jQuery 3.4.1，而bootstrap是来自pypi的已安装软件包

Answer 1

设置断点并查看this的值

$("#context_menu_btn1").click(function() {
    $(this).modalForm({formURL: context_btn_id});  
});

我无法运行代码，但是如果我没记错的话，this将引用ID为context_menu_btn1的DOM元素。

这不是您要查找的元素。