How to create a dynamic popup Jquery

Question

I found this Jquery mobile popup example:

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="../chui/chui-3.9.0.js"></script>

$(function() {      
    ///////////////////
    // Initialize Popup
    ///////////////////
    $("#openPopup").bind("singletap", function() {
      $.UIPopup({
        id: "warning",
        title: 'Attention Viewers!', 
        message: 'The performance of "Merchant of Venice", Act 4 scene 1, will begin shortly. Thank you for your patience.', 
        cancelButton: 'Skip', 
        continueButton: 'Stay', 
        callback: function() {
          var popupMessageTarget = document.querySelector('#popupMessageTarget');
          popupMessageTarget.textContent = 'Thanks for staying with us a bit longer.';
          popupMessageTarget.className = "";
          popupMessageTarget.className = "animatePopupMessage";
        }
      });
    });             
});

Image element:
img src='images/Google-Maps.png' id='openPopup' />

I have about another 10 image elements which are populated dynamically (id="openPopup", id="openPopup1",id="openPopup2",...etc). The image elements should display the popup with different contents. How can I attach the function dynamically to each element !!

chui-3.9.0.js can be found here: https://github.com/sourcebits-robertbiggs/chui/blob/master/dist/chui/chui-3.9.2.js

Answer 1

To bind the popup action to multiple images, I suggest using a single common class rather than sequential IDs.

$(function() {
  $(".openPopup").on("click", function() {
    $('#output').text($('#output').text()+'Clicked! ');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://lorempixel.com/100/50/abstract/1/" class="openPopup" />
<img src="http://lorempixel.com/100/50/abstract/2/" class="openPopup" />
<img src="http://lorempixel.com/100/50/abstract/3/" class="openPopup" />

<div id="output"></div>

To change the popup's content depending on which element was clicked, I suggest using one of the following methods:

1. Reference a JavaScript object that you've previously populated.

   Use jQuery's index() to identify the position of the clicked element in the set of selected elements. Use that integer to reference the relevant portion of your JavaScript object.

   var popup_data = {
     '1': {
       'title': 'Title #1',
       'description': 'Description #1'
     },
     '2': {
       'title': 'Title #2',
       'description': 'Description #2'
     },
     '3': {
       'title': 'Title #3',
       'description': 'Description #3'
     }
   };
   
   $(function() {
   
     $(".openPopup").on("click", function() {
       
       var index = jQuery(this).index(),
           this_data = popup_data[index];
       
       $('#output').html(this_data.title + "<br />" + this_data.description);
       
     });
   
   });

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   
   <img src="http://lorempixel.com/100/50/abstract/1/" class="openPopup" />
   <img src="http://lorempixel.com/100/50/abstract/2/" class="openPopup" />
   <img src="http://lorempixel.com/100/50/abstract/3/" class="openPopup" />
   
   <div id="output"></div>

2. Read values from data attributes.

   Use jQuery's data() method to access various data attributes of the clicked element.

   $(function() {
   
     $(".openPopup").on("click", function() {
       
       var $this = jQuery(this),
           title = $this.data('title'),
           description = $this.data('description');
       
       $('#output').html(title + "<br />" + description);
       
     });
   
   });

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   
   <img src="http://lorempixel.com/100/50/abstract/1/" class="openPopup" data-title="Title #1" data-description="Description #1" />
   <img src="http://lorempixel.com/100/50/abstract/2/" class="openPopup" data-title="Title #2" data-description="Description #2" />
   <img src="http://lorempixel.com/100/50/abstract/3/" class="openPopup" data-title="Title #3" data-description="Description #3" />
   
   <div id="output"></div>

I haven't included Chui in my demonstrations, but the concepts should still be applicable.