Question

在第一个jsp页面

main.jsp中

<div id="backgroundPopup"></div>
 <div class="sharePost">
 </div>

<s:iterator var="msge" value="messageList">
    <div class="message" id="<s:property value="messageid"/>_<s:property  value="ReceivedById"/>">
        <s:property value="messageid"/>
 <span class="share">
          <a href="#" id="sharethis" title="share this">Share</a>
 </span>
 <span class="sharecount">
          <s:if test="%{totalShare>0}">
             <s:property value="totalShare"/>
          </s:if>
  </span>
</div>
</s:iterate>
<script>

        event.preventDefault();
        var msgid=$(this).parents('.message').attr('id');
        var msgid1=msgid.substring(0,msgid.lastIndexOf('_'));
        var receiverid= msgid.substring(msgid.lastIndexOf('_')+1);

        var dataString = 'messageid='+ msgid1+'&receivedById='+receiverid; 
        alert(dataString);
        if($('#'+msgid+' .sharecount').html(""))
        {
            $('#'+msgid+' .sharecount').html("0");
        }
        $shareNo= parseInt($('#'+msgid+' .sharecount').html(), 10);
        $shareNo++;
        $('#'+msgid+' .sharecount').html(""+$shareNo);
        $.ajax({   
            type: "POST",   
            url: "fetchSharePage", 
            dataType: "text html",
            data: dataString,   
            success: function(data) { 
                $("#backgroundPopup").css("opacity", "0.7");
                $("#backgroundPopup").fadeIn(0001);
                $(".sharePost").html(data);
               }   
        }); 

    }); 

</script>

这是我的第一个jsp页面，我想要获取共享页面包含消息详细信息。此页面正确地在shareIt.jsp中获取消息的详细信息 shareIt是一个弹出式div。

shareIt.jsp

<div class="share-data">
    <h1>Share this to your profile
    </h1>

    <div id="messages_and_pages">
        <div id="messages" class="messages">
            <s:iterator var="msge" value="messageList">
                <div class="message" id="<s:property value="messageid"/>">
                    <s:property value="messageid"/>
                </div>
           <input type="hidden" value="<s:property  value="messageid"/>" 
                   id="message-id">
            <input type="hidden" value="<s:property  value="sentBy"/>" 
                   id="sent-by">
            <input type="hidden" value="<s:property  value="authorId"/>" 
                   id="author"> 
            </s:iterate>
 <div class="action-set">
        <input id="share-ok" type="submit"  value="Share">
        <input id="share-cancle" type="button"  value="Cancel">
</div>

<script>

        $(document).on('click', '#share-ok', function(event){

            var msgid=$("#message-id").val();
            var author=$("#author").val();
            var shareString = 'messageid='+ msgid+ '&authorId='+author;

            event.preventDefault();
            alert(shareString);

            $.ajax({   
                type: "POST",   
                url: "shareThisMessage", 
                dataType: "text html",
                data: shareString,   
                success: function(data) { 
                    $(".sharePost").html(data);
                    $(".share-data").hide(1000);
                    $(".sharePost").html("");

                }   
            }); 
        }); 
        $(document).on('click', '#share-cancle', function(event){ 
            hidePopup();  
        });
        function hidePopup() {
            $("#backgroundPopup").fadeOut("normal");
            $(".share-data").hide();
            $(".sharePost").html("");
        }
        $(this).keyup(function(event) {
            if (event.which == 27) { 
                hidePopup(); 
            }
        });

    </script>

这里使用的CSS是

.share-data{
    border: 1px solid #c6c6c6;
    background-color: white;
    margin-bottom: 6px;
    margin-top: 6px;
    position: fixed;
    z-index: 5;
    top: 50%;
    left: 50%;
    width:600px;
    background:#6b6a63;
    margin-left: -304px;
    margin-top: -280px;
}
#backgroundPopup {
    z-index:4;
    position: fixed;
    display:none;
    height:100%;
    width:100%;
    background:#000000;
    top:0px;
    left:0px;
}

代码正常运行。问题在于点击Share buttom

1次表格提交1次

然后，如果我点击其他消息分享按钮，则提交3次

然后，如果我点击另一个消息分享按钮，它将提交7次等等。

我不知道它为什么多次提交。

Answer 1

在致电之前尝试取消

$(document).off('click', '#share-ok');
$(document).on('click', '#share-ok', function(event){ ....

我怀疑你的.on被多次调用，每次调用shareit.jsp一次。

其他一些问题。假设您在shareit.jsp中的迭代器返回的不仅仅是一个项目，您将创建具有相同id的多个标记：message-id，sent-by和author。 ID必须是唯一的。

在shareit.jsp中的<s:property value="messageid"/>下，您认为我应该<div> </div>。此外，我看不到您关闭这两个标记的位置：<div id="messages_and_pages">和<div id="messages" class="messages">。

ajax popup div表单多次提交

1 个答案: