引导模式在 laravel 中不起作用答案

【问题标题】：Bootstrap modal not working in laravel引导模式在 laravel 中不起作用
【发布时间】：2016-11-20 05:05:11
【问题描述】：

我希望当我点击编辑帖子下拉链接时，会打开一个模式，但除了刷新页面之外什么都没有发生。

我的布局视图中包含的脚本：

<script src="https://code.jquery.com/jquery-1.12.0.min.js"   ></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>
<script src="src/js/myplace.js"></script>

HTML 代码：

 @if(Auth::user()==$post->user)
   <ul id="remove" class="dropdown-menu" role="menu">
    <a id="remove2" href="{{route('post.delete',['post_id' => $post->id])}}">
       <li  id="remove3" role="presentation">Remove This Post </li>
    </a>
    <a id="remove2" href="">
       <li  id="remove3" role="presentation">Edit This Post </li>
    </a>
   </ul>
   @endif

我的 JS 文件：

$('#remove2').find('li').on('click' , function(){
  $('#edit-modal').modal();
});

【问题讨论】：

模态初始化也无效，模态会在每次点击时多次注册。如果需要，需要在开始时初始化并在点击时切换。
您的 html 无效。 <a> 不能是 <ul> 的孩子，也不能有孩子 <li> 并且您重复 ID

标签： javascript jquery html twitter-bootstrap laravel

【解决方案1】：

您的示例没有 Bootstrap 模态 HTML，但我假设您在页面上有它。

您遇到了几个问题。首先，您有多个具有相同 ID 的元素，这是您无法做到的。 ID 必须是唯一的。

其次，您正在对链接元素使用点击操作，这可能会触发其默认行为。

把你的 HTML 改成这样

 @if(Auth::user()==$post->user)
   <ul id="remove" class="dropdown-menu" role="menu">
    <a id="remove2" href="{{route('post.delete',['post_id' => $post>id])}}">
       <li  role="presentation">Remove This Post </li>
    </a>
    <a id="remove3" href="">
       <li  role="presentation">Edit This Post </li>
    </a>
   </ul>
   @endif

还有你的 JavaScript 来

$('#remove3').on('click' , function(e){
   e.preventDefault();
  $('#edit-modal').modal();
});

您需要阻止链接的默认行为才能使用它打开模式。没有理由将列表元素作为目标，因为链接元素上发生了点击事件

【讨论】：

【解决方案2】：

您可以通过稍微修改代码来做到这一点，正如 Rob Fonseca 在上述答案中所建议的那样，但这里有其他可能适合您的解决方案。

这是你的下拉菜单

@if(Auth::user()==$post->user)
<ul class="dropdown-menu">
     <li><a href="#">Remove</a></li> //Replace with your code 
     <li><a href="#" onclick="editPost({{ $post>id }})">Edit</a></li>
</ul>
@endif

您可以随心所欲地使用 Id，但要确保它是唯一的。

这里是Javascript函数

function editPost(postId){
  //Here You can do more stuff like make ajax call to load post data...
  $('#editPostModel').modal();
}

您可以在这里找到工作示例：JsFiffle

【讨论】：

【解决方案3】：

如果您使用的是 Bootstrap 5.0，则在 bootstrap.js 或您的 app.js 代码中，data-dismiss 选择器似乎已更改为 data-bs-dismiss。
所以我只需将data-dismiss="modal" 更改为data-bs-dismiss="modal" 就可以了。
Version: Laravel 8

【讨论】：