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

作为旁注，为每个显示的按钮调用更新事件(我在每个提醒的侧面都有一个按钮)，而上下文菜单中的查看提醒按钮根据单击的提醒而变化。我还发现，使用each()时，每次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 元素。

这不是您要寻找的元素。