Question

点击Add Comment按钮后，我试图让弹出窗口消失，但我必须单击两次才能使其工作。当我第一次点击它时，两个按钮消失并重新出现。然后，当我第二次点击它时它会消失，并且功能正常工作。

后退按钮与第一次点击时消失的弹出窗口完美配合。我假设它与尝试在我的评论功能中有关，但我无法弄明白。

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代码：

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

尝试阻止表单提交事件。

<form onSubmit="return false">

必须单击两次按钮才能执行功能

1 个答案: