title: Javascript onClick function only works once in rails magnific popup
body: <p>I'm using the google maps api in a rails app in order to be able to mark an object by clicking on the map. Clicking on the map should bring up a rails form for the object using the magnific popup gem and the form can be submitted to create a new object. This process will work for the first time you click on the map but the second time you try to press the submit button on the popup, nothing will happen. Pressing the submit button should send a post request to my create action and close the popup but neither of that is happening. Heres the relevant js code:</p>
  
  <pre><code>google.maps.event.addListener(handler.getMap(), 'click', function 
     (event) {
         handleClickEvent(event);
      });
  </code></pre>
  
  <p>handleClickEvent code</p>
  
  <pre><code>displayPopup(event.latLng.lat(), event.latLng.lng(), &lt;%=current_user.id %&gt;);
    var submitButton = document.getElementsByClassName('mfp-close')['submitButton'];
    submitButton.onclick = function() {
      var text = "&lt;h4&gt; marked by: @&lt;%= current_user.username %&gt; &lt;/h4&gt;&lt;/br&gt; info will load on refresh" ;
        createMarker(event.latLng.lat(), event.latLng.lng(), text);
      };
  </code></pre>
  
  <p>The magnific popup js</p>
  
  <pre><code>function displayPopup(lat, lng, user){
        $.magnificPopup.open({
             items: {
                 src: '#pothole-popup',
                 type: 'inline'
             },
             callbacks: {
               change: function() {
                 this.content[0].children[0][2].value = lat;
                 this.content[0].children[0][3].value = lng;
                 this.content[0].children[0][4].value = user;
               }}
         });
       }
  </code></pre>
  
  <p>Standard adding a marker</p>
  
  <pre><code> function createMarker(lat, lng, text){
      var marker = handler.addMarker({
        lat: lat,
        lng: lng,
        infowindow: text
      }, {animation: google.maps.Animation.DROP});
    }
  </code></pre>
  
  <p>The form that pops up:</p>
  
  <pre><code>&lt;%= form_for :pothole, url: potholes_path do |form| %&gt;
  
  &lt;h3&gt;Mark a pothole&lt;/h3&gt;
  &lt;br&gt;
    &lt;%= form.number_field :latitude, step: :any, class: "gone"%&gt;
    &lt;%= form.number_field :longitude, step: :any, class: "gone"%&gt;
    &lt;%= form.number_field :user_id, class: "gone"%&gt;
  
  &lt;p&gt;
    &lt;%= form.label "Comments" %&gt;&lt;br&gt;
    &lt;%= form.text_field :comment %&gt;
  &lt;/p&gt;
  
  &lt;p&gt;
    &lt;%= form.label "Severity" %&gt;&lt;br&gt;
    &lt;%= form.select :severity, (1..10) %&gt;
  &lt;/p&gt;
  
  &lt;%= form.submit "Submit", class: "mfp-close" %&gt;
  
  &lt;% end %&gt;
  </code></pre>
  
  <p>The "mfp-close" class enables the button to close the magnific popup, but even that is not firing on the second click of the submit button. <a href="http://dimsemenov.com/plugins/magnific-popup/documentation.html#closebtninside" rel="nofollow noreferrer">http://dimsemenov.com/plugins/magnific-popup/documentation.html#closebtninside</a></p>
  
  <p>I'm thinking this may be a javascript problem because of the nested onClick function but I'm not sure. Any suggestions?</p>