Javascript onClick function only works once in rails magnific popup

Question

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:

google.maps.event.addListener(handler.getMap(), 'click', function 
   (event) {
       handleClickEvent(event);
    });

handleClickEvent code

displayPopup(event.latLng.lat(), event.latLng.lng(), <%=current_user.id %>);
  var submitButton = document.getElementsByClassName('mfp-close')['submitButton'];
  submitButton.onclick = function() {
    var text = "<h4> marked by: @<%= current_user.username %> </h4></br> info will load on refresh" ;
      createMarker(event.latLng.lat(), event.latLng.lng(), text);
    };

The magnific popup js

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

Standard adding a marker

 function createMarker(lat, lng, text){
    var marker = handler.addMarker({
      lat: lat,
      lng: lng,
      infowindow: text
    }, {animation: google.maps.Animation.DROP});
  }

The form that pops up:

<%= form_for :pothole, url: potholes_path do |form| %>

<h3>Mark a pothole</h3>
<br>
  <%= form.number_field :latitude, step: :any, class: "gone"%>
  <%= form.number_field :longitude, step: :any, class: "gone"%>
  <%= form.number_field :user_id, class: "gone"%>

<p>
  <%= form.label "Comments" %><br>
  <%= form.text_field :comment %>
</p>

<p>
  <%= form.label "Severity" %><br>
  <%= form.select :severity, (1..10) %>
</p>

<%= form.submit "Submit", class: "mfp-close" %>

<% end %>

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. http://dimsemenov.com/plugins/magnific-popup/documentation.html#closebtninside

I'm thinking this may be a javascript problem because of the nested onClick function but I'm not sure. Any suggestions?

Answer 1

我发现了问题，由于某种原因添加了data-disable-with属性，因此我需要将其删除

submitButton.removeAttribute("data-disable-with");