简体   繁体   English

Javascript onClick函数在rails大型弹出窗口中仅工作一次

[英]Javascript onClick function only works once in rails magnific popup

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. 我正在Rails应用程序中使用google maps api,以便能够通过单击地图来标记对象。 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. 单击地图应使用宏伟的弹出窗口弹出该对象的rails表单,并且可以提交该表单以创建新对象。 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. 此过程将在您第一次单击地图时起作用,但是在您第二次尝试按弹出窗口上的Submit按钮时,将不会发生任何事情。 Pressing the submit button should send a post request to my create action and close the popup but neither of that is happening. 按下“提交”按钮应该将发布请求发送到我的create动作并关闭弹出窗口,但两者均未发生。 Heres the relevant js code: 这里是相关的js代码:

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

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

The magnific popup js 华丽的弹出式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. “ mfp-close”类使按钮可以关闭宏大的弹出窗口,但即使在第二次单击提交按钮时也无法触发。 http://dimsemenov.com/plugins/magnific-popup/documentation.html#closebtninside 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. 由于嵌套的onClick函数,我认为这可能是JavaScript问题,但我不确定。 Any suggestions? 有什么建议么?

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM