Javascript 引导模式在laravel中不工作

Javascript 引导模式在laravel中不工作,javascript,jquery,html,twitter-bootstrap,laravel,Javascript,Jquery,Html,Twitter Bootstrap,Laravel,我希望当我点击编辑帖子下拉链接时,会打开一个模式,但除了刷新页面外,什么都没有发生 我的布局视图中包含的脚本: <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

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

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

<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,但我假设您在页面上有

你有几个问题。首先,您有多个具有相同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

您需要防止链接的默认行为,以便将其用于打开模式。没有理由以列表元素为目标,因为链接元素上正在发生单击事件

您可以通过稍微修改代码来实现这一点,正如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

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

模式初始化也无效,每次单击都会多次注册模式。需要在开始时初始化并在需要时切换单击。您的html无效<代码>不能是
的子项,也不能有子项
  • ,并且您正在重复ID
     @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
    
    $('#remove3').on('click' , function(e){
       e.preventDefault();
      $('#edit-modal').modal();
    });
    
    @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
    
    function editPost(postId){
      //Here You can do more stuff like make ajax call to load post data...
      $('#editPostModel').modal();
    }