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

Have to click button twice for function to execute

本文关键字:按钮 两次 功能 执行      更新时间:2023-09-26

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

后退按钮与第一次点击时消失的弹出窗口完美配合。我认为这与试图在我的评论功能中做到这一点有关,但我不明白。

HTML代码:

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

尝试阻止表单提交事件。

<form onSubmit="return false">