Javascript 为什么我的模态没有显示，即使它直接从引导复制

我目前正在学习OMDB API，并使用bootstrap和JQuery。因此，我的代码的错误在于，当我单击“查看详细信息”时，它应该显示模式，我将使用它来显示API中的电影详细信息，但模式没有显示。代码如下：

（你基本上可以忽略其他模式（可能），但如果你想尝试，我会在youtube教程中加入它，因为它工作正常，但我的不行） HTML:

搜索电影
搜寻

情态标题
&时代；
...
接近
保存更改

JS:

$（文档）.ready（函数（）{
函数searchMovie（）{
$（“#电影列表”）.html（“”）；
$.ajax({
网址：'http://www.omdbapi.com',
键入：“get”，
数据类型：“json”，
数据：{//data-yang-akan-dikirimkan-ke-url-seperti参数
“apikey”：“d250323f”，
's'：$（'#搜索输入'）.val（）
},
成功：功能（结果）{
如果（result.Response==“True”）{
让电影=结果。搜索；
$。每个（电影、功能（索引、数据）{
$（“#电影列表”）。追加(`
${data.Title}
${data.Year}
`)；//使用模态的“查看详细信息”位于此注释上方的标记中
});
$（“#搜索输入”）.val（“”）；
}否则{
$（'#电影列表'）.html（`${result.Error}`）；
}
}
});
}
$（“#搜索按钮”）。在（'click'，function（）上{
searchMovie（）；
});
$（“#搜索输入”）。在（'keyup'，函数（事件）上{
如果（event.keyCode===13）{
searchMovie（）；
}
});
//…又是一堆代码
});

页面中是否包含引导库？控制台中显示了哪些错误？@Rorymcrossan是的，我已经将其包含在代码中，只是没有包含在这里。不幸的是，控制台中并没有任何错误，但因为您提到了它，所以我做了一个。我创建了包含console.log（'test'）的test（）函数；并在属性中添加onclick=“test（）”，并具有“（索引）：1未捕获引用错误：测试未在我的控制台的htmlanchoreElement.onclick（（索引）：1）”中定义。任何解决方案？

onclick=“test（）”

和

测试未定义

通常意味着您的

函数测试（）{}

定义没有全局范围，可能是在文档中定义的。ready@freedomn-哦，你说得对，这是因为范围。

test（）

现在正在工作，但是我的模式仍然没有。当我运行你在这里包含的代码并向代码中添加引导js和css时，一切都正常。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">WPU MOVIE</a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNavAltMarkup"
      aria-controls="navbarNavAltMarkup"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Search Movie</a>
      </div>
    </div>
  </div>
</nav>

<div class="container">
  <div class="row mt-3 justify-content-center">
    <div class="col-md-8">
      <h1 class="text-center">Search Movie</h1>
      <div class="input-group mb-3">
        <input
          type="text"
          class="form-control"
          placeholder="Movie's title..."
          id="search-input"
        />
        <div class="input-group-append">
          <button class="btn btn-dark" type="button" id="search-button">
            Search
          </button>
        </div>
      </div>
    </div>
  </div>
  <hr />
  <div class="row" id="movie-list"></div>
</div>


<!-- so i remove the button and took just the data-toggle and data-target in my JQuery -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

$( document ).ready(function() {
function searchMovie() {
    $('#movie-list').html('');
    $.ajax({
        url: 'http://www.omdbapi.com',
        type: 'get',
        dataType: 'json',
        data: { //data yang akan dikirimkan ke url seperti parameter
            'apikey': 'd250323f',
            's': $('#search-input').val()
        },
        success: function(result) {
            if (result.Response == 'True') {
                let movies = result.Search;
                $.each(movies, function(index, data) {
                    $('#movie-list').append(`
                    <div class="col-md-4 mb-3">
                        <div class="card">
                            <img class="card-img-top" src="${data.Poster}">
                            <div class="card-body">
                                <h5 class="card-title">${data.Title}</h5>
                                <h6 class="card-subtitle mb-2 text-muted">${data.Year}</h6>
                                <a href=# class="card-link see-detail" data-toggle="modal" data-target="#exampleModal" data-id="${data.imdbID}">See Detail</a>
                            </div>
                        </div>
                    </div>
                    `); //The 'See Detail' to work with the modal is in the <a> tag just above this comment
                });
                $('#search-input').val('');
            } else {
                $('#movie-list').html(`<h1 class="text-center">${result.Error}</h1>`);
            }
        }
    });
}
$('#search-button').on('click', function() {
    searchMovie();
});
$('#search-input').on('keyup', function(event) {
    if (event.keyCode === 13) {
        searchMovie();
    }
});
//... another chuck of code 
});