Klicken Sie zweimal auf die Schaltfläche, um die Funktion auszuführen

Question

Ich versuche, ein Popup zu verschwinden, sobald ich auf die Schaltfläche Add Comment klicke, aber ich muss zweimal darauf klicken, damit es funktioniert. Wenn ich das erste Mal klicke, verschwinden die beiden Tasten und erscheinen wieder. Dann, wenn ich es das zweite Mal anklicke, verschwindet es wie es soll und die Funktion funktioniert wie es sollte.

Die Zurück-Taste funktioniert perfekt mit dem Popup verschwindet auf den ersten Klick. Ich gehe davon aus, dass es etwas damit zu tun hat, es innerhalb meiner Kommentarfunktion zu tun, aber ich kann es nicht herausfinden.

HTML-Code:

<div data-role="popup" id="popupComment" data-theme="a" class="ui-corner-all"> 
    <form> 
     <div style="padding:10px 20px;"> 
      <h3>Please add comment</h3> 
      <label for="un" class="ui-hidden-accessible">Comment:</label> 
      <input type="text" name="comment" id="comment" value="" placeholder="Comment" data-theme="a"> 
      <button onclick="goCommenting()" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Add Comment</button> 
      <button onclick="document.getElementById('popupComment').style.display='none'; event.preventDefault();" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Back</button> 
     </div> 
    </form> 
</div> 

JavaScript-Code:

function goCommenting(){ 

    //alert(document.getElementById("comment").value); 
    var infoWindow = new google.maps.InfoWindow(); 
    var listener1 = map.addListener('click', function(e) { 

       //var comment = document.getElementById("editNameBox").value; 
       placeMarkerAndPanTo(e.latLng, map,comment); 
      }); 


    function placeMarkerAndPanTo(latLng, map) { 
     var commentMarker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      draggable:true 
     }); 
     (function (commentMarker) { 
      google.maps.event.addListener(commentMarker, "click", function (e) { 
       //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow. 
       infoWindow.setContent("<div>'"+document.getElementById("comment").value+"'</div>"); 
       infoWindow.open(map, commentMarker); 
      }); 
     })(commentMarker); 

     //(function (commentMarker) { 
      google.maps.event.addListener(
       commentMarker, 
       'drag', 
       function() { 
        //document.getElementById('lat').value = marker.position.lat(); 
        //document.getElementById('lng').value = marker.position.lng(); 
       } 
       ); 
     //})(commentMarker); 

     google.maps.event.removeListener(listener1); 
    } 
    event.preventDefault(); 
    document.getElementById('popupComment').style.display='none'; 
} 

Answer 1

Versuche zu verhindern Formularereignis vor.

<form onSubmit="return false">