0

在第一个jsp页面

主.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;
}

代码工作正常。问题是在单击共享按钮时

1 次表单正在提交 1 次

然后，如果我单击另一个消息共享按钮，它将提交 3 次

然后，如果我单击另一个消息共享按钮，它将提交 7 次，依此类推。

我不明白为什么它会多次提交。

4

1 回答 1

0

在你打电话之前尝试取消

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

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

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

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

于 2013-06-24T12:33:43.187 回答