单击后显示模态弹出窗口

Question

我在那个导航栏中有一个导航栏，我最后有一个推文选项，所以当有人点击该推文时，应该会打开一个弹出模型。我试过下面的代码，但它不工作。谁能指导我哪里出错了？

$(document).ready(() => {
  $('#header #nav-menu-container ul').append('<li class="tweet"><a href="#tweetmodel">Tweets</a></li>').addClass('additionalnavtext');
  $('.tweet').click(() => {
    $('<div id="tweetmodel" class="modal"><p>Testing</p><a href="#" rel="modal:close">Close</a></div>').open();
  });
});

Answer 1

由于您稍后添加了带有 tweet class 的元素，因此在 jQuery 的 DOM 中不可用。试试这个

$('body').on('click', '.tweet', () => {
    //your code here
});

Answer 2

仅当 DOM 元素完全加载时，.click() 函数才会绑定。在 DOM 之后加载的任何动态内容或东西都不适用于 .click() 函数。处理程序不会绑定 DOM 元素。

下面的代码将解决这个问题。

$(document).on('click', '.tweet', function(e){
    //your code here
});

Answer 3

您在使用 jQuery 模式吗？ jQuery中没有open方法。如果您使用 jQuery 模态，代码应该像这样：

$(document).ready(() => {
  $('#header #nav-menu-container ul').append('<li class="tweet"><a href="#tweetmodel">Tweets</a></li>').addClass('additionalnavtext');
  $('.tweet').click(() => {
    $('<div id="tweetmodel" class="modal"><p>Testing</p><a href="#" rel="modal:close">Close</a></div>').modal();
  });
});

工作源代码在这里：https://jsfiddle.net/bravemaster619/0hpf51o9

$(document).ready(() => {
  $('#header #nav-menu-container ul').append('<li class="tweet"><a href="#tweetmodel">Tweets</a></li>').addClass('additionalnavtext');
  $('.tweet').click(() => {
    $('<div id="tweetmodel" class="modal"><p>Testing</p><a href="#" rel="modal:close">Close</a></div>').modal();
  });
});

body {
  background: #eeeeee;
  padding: 20px;
  font-family: Helvetica;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" rel="stylesheet" />


<div id="header">
  <div id="nav-menu-container">
    <ul>

    </ul>
  </div>
</div>

Answer 4

<html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
    </head>
    <body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nav-menu-container">
        <ul class="navbar-nav"> 
        </ul>
      </div>  
    </nav>
     <div class="container">
      <div class="row">
      </div>
      <div id="modalContainer">
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
      <script>
      $(function(){
    const tweetli = $(`<li class="nav-item">
            <a class="nav-link tweet" href="javascript:void(0)">Tweets</a>
      </li>`).appendTo('#nav-menu-container ul');
    
    tweetli.find('a.tweet').on('click', ()=>{
     $('#modalContainer').html($(`<div class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">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">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save changes</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>`).modal('show'));
    })
    })
      </script>
    </body>
    </html>

单击后显示模态弹出窗口

Show model pop up after clicking

html

jquery

modal-dialog