Javascript onClick 函数仅在 rails magnific popup 中有效答案

【问题标题】：Javascript onClick function only works once in rails magnific popupJavascript onClick 函数仅在 rails magnific popup 中有效
【发布时间】：2018-03-26 05:24:08
【问题描述】：

我在 Rails 应用程序中使用 google maps api，以便能够通过单击地图来标记对象。单击地图应该会使用 magnific popup gem 为对象打开一个 rails 表单，并且可以提交该表单以创建一个新对象。此过程将在您第一次单击地图时起作用，但当您第二次尝试按下弹出窗口上的提交按钮时，什么都不会发生。按下提交按钮应该向我的创建操作发送一个发布请求并关闭弹出窗口，但这些都没有发生。下面是相关的js代码：

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

handleClickEvent 代码

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

华丽的弹窗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;
             }}
       });
     }

标准添加标记

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

弹出的表格：

<%= 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 %>

“mfp-close”类使按钮能够关闭放大的弹出窗口，但即使在第二次单击提交按钮时也不会触发。 http://dimsemenov.com/plugins/magnific-popup/documentation.html#closebtninside

由于嵌套的 onClick 函数，我认为这可能是一个 javascript 问题，但我不确定。有什么建议吗？

【问题讨论】：

标签： javascript ruby-on-rails google-maps onclick magnific-popup

【解决方案1】：

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

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

【讨论】：