Show model pop up after clicking

Question

I have a navigation bar in that navigation bar i have a tweet option in the end, So when some one clicks on that tweet a pop up model should open. I have tried with below code but its not working. Any one guide me where i am going wrong?

$(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();
  });
});

You are added dynamic HTML? – jishan siddique Feb 25 '20 at 05:25 — jishan siddique, Feb 25 '20 at 05:25

score 0 · Answer 1 · answered Feb 25 '20 at 05:18

0

Since you added the element with tweet class later, its not available in the DOM for jQuery. Try this

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

answered Feb 25 '20 at 05:18

Whip

1,891
22
43

score 0 · Answer 2 · answered Feb 25 '20 at 05:40

0

The function .click() will bind only if the DOM elements are loaded completely. Any dynamic content or things loaded after DOM will not work for .click() function. Handler will not be bind the the DOM element.

The following code will solve the case.

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

answered Feb 25 '20 at 05:40

Jayanth Thyagarajan

86
1
8

is it $(document).on('click' , '.tweet', function(e){ }); or $(body).on('click' , '.tweet', function(e){ }); – Amit Paple Feb 25 '20 at 05:48
@AmitPaple Please refer [link](https://stackoverflow.com/questions/13687269/bind-events-on-body-or-document) for more details. – Jayanth Thyagarajan Feb 25 '20 at 06:16
@AmitPaple please refer this [link](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements?rq=1) as well. This talks about dynamic binding which is your case. – Jayanth Thyagarajan Feb 25 '20 at 06:23

score 0 · Accepted Answer · answered Feb 25 '20 at 05:44

Are you using jQuery modal? There is no open method in jQuery. If you're using jQuery modal the code should be like this one:

$(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();
  });
});

Working source code is here: 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>

i'm getting this error Uncaught TypeError: e(...).modal is not a function — Amit Paple, Feb 25 '20 at 06:06
Make sure jquery is loaded before jquery-modal. And see if you included jquery-modal. Check my working code and find out what is different. — glinda93, Feb 25 '20 at 06:07

score 0 · Answer 4 · answered Feb 25 '20 at 06:15

<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

4 Answers4