title: Bootstrap JavaScript adding events dynamically not linking to modal window
body: <p>I have a filter, where they select a media item (ie: radio, digital streetpole, traditional streetpole, bench, poster, etc.) and it then adds that with a whole bunch of it's variables. Let me expand:</p>
  
  <p>The user has preset areas that they selected earlier but is also able to select multiple areas (Johannesburg, CapeTown, California, India) on top of that, then he selects a media item and it goes and looks for the average price of that media item in that area.</p>
  
  <p>There are going to be more options now, on a modal window, that will allow them to select certain options about that media type in that area. </p>
  
  <p>The thing leading to my issue: There are preset modal windows with options inside of them, depending on which 'more options' button they click on (so which media type), it must pop up the relevant modal window.</p>
  
  <p><strong>MY ISSUE</strong></p>
  
  <p>When adding a new media item, the modal window for extra options does not pop up anymore but does on the ones that were already there (ie: the preset ones).</p>
  
  <p>Here are some pictures to show you what I mean:</p>
  
  <p>Preset media items:</p>
  
  <p><img src="https://i.stack.imgur.com/aFcRW.png" alt="initial preset media items"></p>
  
  <p>modal window on one of the selected more options buttons:</p>
  
  <p><img src="https://i.stack.imgur.com/ZGHrq.png" alt="modal window on one of the selected more options buttons"></p>
  
  <p>adding media type / filtering:</p>
  
  <p><img src="https://i.stack.imgur.com/cy7yC.png" alt="adding media type / filtering"></p>
  
  <p>adds extra media item / filtering:</p>
  
  <p><img src="https://i.stack.imgur.com/f5IIf.png" alt="adds extra media item / filtering"></p>
  
  <p>So as you can see, the media item adds to the list, but selecting the 'more options' button, nothing happend on the new item, but it will still work on the old ones.</p>
  
  <p>Here is the code:</p>
  
  <p>HTML for Modal Popup:</p>
  
  <pre><code>&lt;div class="modal fade" id="optionsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
              &lt;h4 class="modal-title" id="myModalLabel"&gt;Choose the size&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;table class="table"&gt;
                  &lt;thead&gt;
                  &lt;th width="100"&gt;&amp;nbsp;&lt;/th&gt;
                  &lt;th&gt;Size Options&lt;/th&gt;
                  &lt;th&gt;Printable Size&lt;/th&gt;
                  &lt;th&gt;Price Range (Min-Max)&lt;/th&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
                      &lt;td&gt;4 Sheet&lt;/td&gt;
                      &lt;td&gt;60X60 Inches&lt;/td&gt;
                      &lt;td&gt;R500 - R10,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
                      &lt;td&gt;4 Sheet&lt;/td&gt;
                      &lt;td&gt;60X60 Inches&lt;/td&gt;
                      &lt;td&gt;R500 - R10,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
                      &lt;td&gt;4 Sheet&lt;/td&gt;
                      &lt;td&gt;60X60 Inches&lt;/td&gt;
                      &lt;td&gt;R500 - R10,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
                      &lt;td&gt;4 Sheet&lt;/td&gt;
                      &lt;td&gt;60X60 Inches&lt;/td&gt;
                      &lt;td&gt;R500 - R10,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
                      &lt;td&gt;4 Sheet&lt;/td&gt;
                      &lt;td&gt;60X60 Inches&lt;/td&gt;
                      &lt;td&gt;R500 - R10,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>HTML for populating the list (includes PHP):</p>
  
  <pre><code>&lt;tr class="asset_&lt;? echo $counterForAsset; ?&gt; asset_item"&gt;
                      &lt;td&gt;&lt;?php  echo strtoupper($media_types[$i]); ?&gt;
                      &lt;input type="hidden" id="media_category" name="mec_id[]" value=""&gt;
                      &lt;input type="hidden" id="media_category" name="media_category[]"
                             value="&lt;?php echo $media_types[$i]; ?&gt;"&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text"
                                 class="form-control input-sm q_asset_&lt;? echo $counterForAsset; ?&gt; med_quantity"
                                 name="med_quantity[]" id="med_quantity" placeholder="Quantity Required"
                                 value="&lt;? echo $qty; ?&gt;"/&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" readonly="true" name="avg_total[]"
                                 id="asset_&lt;? echo $counterForAsset; ?&gt;"
                                 class="form-control input-sm avg_asset_&lt;? echo $counterForAsset; ?&gt;"
                                 value="&lt;? echo number_format($av_price, 2); ?&gt;"/&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" readonly="true" name="rem_total[]"
                                 id="asset_&lt;? echo $counterForAsset; ?&gt;"
                                 class="form-control input-sm rem_asset rem_asset_&lt;? echo $counterForAsset; ?&gt;"
                                 value="&lt;? echo number_format($price, 2); ?&gt;"/&gt;&lt;/td&gt;
                      &lt;td width="50"&gt;&lt;a href="#" class="btn btn-primary btn-sm" data-toggle="modal"
                                        data-target="#&lt;?php echo strtolower($type); ?&gt;OptionsModal"&gt;&lt;span class="glyphicon glyphicon-play"&gt;&lt;/span&gt;
                              More options&lt;/a&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;center&gt;&lt;input type="checkbox" name="checks[]" id="asset_&lt;? echo $counterForAsset; ?&gt;" class="check_asset_&lt;? echo $counterForAsset; ?&gt;"/&gt;&lt;/center&gt;
                      &lt;/td&gt;
                      &lt;/tr&gt;
  </code></pre>
  
  <p>And JS for adding a new media item:</p>
  
  <pre><code>tdMediaType.innerHTML = type.toUpperCase() + ' &lt;input type="hidden" id="media_category", value="'+type+'" name="media_category[] /&gt;';
                                              tdQuantity.innerHTML = '&lt;input id="med_quantity" class="form-control input-sm q_asset_'+assetNumber+' med_quantity" type="text" value="0" placeholder="Quantity Required" name="med_quantity[]"&gt;';
                                              tdAverageAssetPrice.innerHTML = '&lt;input id="asset_'+assetNumber+'" class="form-control input-sm avg_asset_'+assetNumber+'" type="text" value="'+aap.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&amp;,')+'" name="avg_total[]" readonly="true"&gt;';
                                              tdPrice.innerHTML = '&lt;input id="asset_'+assetNumber+'" class="form-control input-sm rem_asset rem_asset_'+assetNumber+'" type="text" value="0.00" name="rem_total[]" readonly="true"&gt;';
                                              tdMoreOptions.innerHTML = '&lt;a href="#" class="btn btn-primary btn-sm" data-target="#'+type2+'OptionsModal" data-togle="modal"&gt;&lt;span class="glyphicon glyphicon-play"&gt;&lt;/span&gt; More Options&lt;/a&gt;';
                                              tdMoreSelect.innerHTML = '&lt;center&gt;&lt;input id="asset_'+assetNumber+'" class="check_asset_'+assetNumber+'" type="checkbox" name="checks[]"&gt;&lt;/center&gt;';
  </code></pre>
  
  <p>Please also take note that the <code>type2</code> variable does put out the correct media type which is a lowercase, spaceless and bracketless string ie: <code>bus (Digital)</code> would be <code>busdigital</code>.</p>