1. 首頁
  2. 問答
  3. jQuery的UI模式對話框塊點擊事件？

jQuery的UI模式對話框塊點擊事件？

2016-01-29 68 views
0

我確實有點擊按鈕來顯示彈出菜單的問題。jQuery的UI模式對話框塊點擊事件？

在我layout.jspx，我有以下：

 <div class="menuBtn"> 
      <div class="search"> 
       <span></span> 
      </div> 
     </div> 
    </header> 
    <tiles:insertAttribute name="body" /> 
</div>  

<!-- USERINFO POPUP --> 
<div class="popup accDetail user" id="userPopup" style="display: none;"> 
    <div class="userInfo"> 
     <img src="${img_user}" width="60" height="60"></img> 
     <div> 
      <p class="department"><security:authentication property="securityUser.department"/></p> 
      <p class="name"><security:authentication property="securityUser.userName"/></p> 
      <p class="email"><security:authentication property="securityUser.email"/></p> 
     </div> 
     <div class="btn clear cen floatNone"> 
      <a class='blank' href="${url_logout}">Log Out</a> 
     </div> 
    </div> 
</div>

當用戶點擊圖標，就會顯示userPopup。

它實際上在其他頁面中運行良好。 （頂部，右側頁面）

enter image description here

然後在我的JSP中的一個，我有以下幾點：

HTML

<div class="mainarea"> 
    <div class="dataTitle"> 
     <h2 class='h2Title'>Annual Leave</h2> 
    </div> 
    <div class="searchParentOne"> 
     <div> 
      <input type="image" class="addNewLetter" src="/ias/resources/images/leave.png" 
      style="height:128px;width:256px;"> 
      <p class="temp-test" style="display:none;"><security:authentication property='securityUser.fullName'/></p> 
     </div> 
    </div> 
</div> 


<div class="popup accDetail" id="letterDialog" title="Leave Application" style="display: none;"> 
<div class="popupmainarea"> 
    <div class="clear bttn" id="divSmallDate"> 
     <div class="bttn rig floatNone"> 
      <button type="button" class="ui-lngbutton edit_ui selectLine">Line</button> 
      <button type="button" class="ui-button up_ui btnSendDoc" style="display:none;">Submit</button> 
      <button type="button" class="ui-button cancel_ui btnCancelCon">Close</button> 
     </div> 
    </div> 

    <form id="formAddNewDoc" enctype="multipart/form-data"> 
    <div class="data"> 
     <div> 
      <p align="center"><font size="6">Annual Leave</font></p> 
     </div> 

     <table class="custbltwo"> 
      <colgroup> 
       <col style="width: 40%;"> 
       <col style="width: 60%;"> 
      </colgroup> 
      <tbody> 
       <tr> 
        <td class="tbHead">Document No.</td> 
        <td class="tbContent" style="border-style: solid hidden solid solid;"><p id="documentId">Mobile C&C Cambodia-XX-XXXX</p></td> 
       </tr> 
       <tr> 
        <td class="tbHead">Department</td> 
        <td class="tbContent" style="border-style: solid hidden solid solid;"><p></p> 
        <input type="hidden" name="docDepartment" id="docDepartment"/> 
        </td>    
       </tr> 
       <tr> 
        <td class="tbHead">Approval Date</td> 
        <td class="tbContent" style="border-style: solid hidden solid solid;"><p id="docDisplayDate" class="today"></p> 
         <input type="hidden" name="docHideCDate" id="docHideCDate"/> 
        </td> 

       </tr> 
       <tr> 
        <td class="tbHead">Writer</td> 
        <td class="tbContent" style="border-style: solid hidden solid solid;"> 
        <p class="temp-test"> 
        <security:authentication property='securityUser.fullName'/> 
        </p> 
        <input type="hidden" name="docEmployee" id="docEmployee" value="<security:authentication property="securityUser.fullName"/>"/> 
        </td>    
       </tr> 
      </tbody> 
     </table> 
     <table class="custblthree"> 
      <colgroup> 
       <col style="width: 12%;"> 
       <col style="width: 17.6%;"> 
       <col style="width: 17.6%;"> 
       <col style="width: 17.6%;"> 
       <col style="width: 17.6%;"> 
       <col style="width: 17.6%;"> 
      </colgroup> 
      <tbody> 
       <tr> 
        <td class="tbHead" rowspan="2">Approval<strong class="required">*</strong> 
        <input type="hidden" name="docApproval" id="docApproval"> 
        </td> 
        <td class="tbContent" align="center" id="clickclick1"><input type="text" readonly="readonly" name="docApp0" id="docApp0" style="border:0; text-align:center;"></td> 
        <td class="tbContent" align="center" id="clickclick2"><input type="text" readonly="readonly" name="docApp1" id="docApp1" style="border:0; text-align:center;"></td> 
        <td class="tbContent" align="center" id="clickclick3"><input type="text" readonly="readonly" name="docApp2" id="docApp2" style="border:0; text-align:center;"></td> 
        <td class="tbContent" align="center" id="clickclick4"><input type="text" readonly="readonly" name="docApp3" id="docApp3" style="border:0; text-align:center;"></td> 
        <td class="tbContent" align="center" id="clickclick5"><input type="text" readonly="readonly" name="docApp4" id="docApp4" style="border:0; text-align:center;"></td> 
       </tr> 
       <tr> 
        <td class="tbContentTwo" align="center" id="clickclick6"><img id="docAppNumImg0"></img></td> 
        <td class="tbContentTwo" align="center" id="clickclick7"><img id="docAppNumImg1"></img></td> 
        <td class="tbContentTwo" align="center" id="clickclick8"><img id="docAppNumImg2"></img></td> 
        <td class="tbContentTwo" align="center" id="clickclick9"><img id="docAppNumImg3"></img></td> 
        <td class="tbContentTwo" align="center" id="clickclick10"><img id="docAppNumImg4"></img> 
        <input type="hidden" readonly="readonly" name="docAppNum0" id="docAppNum0" value="0"> 
        <input type="hidden" readonly="readonly" name="docAppNum1" id="docAppNum1" value="0"> 
        <input type="hidden" readonly="readonly" name="docAppNum2" id="docAppNum2" value="0"> 
        <input type="hidden" readonly="readonly" name="docAppNum3" id="docAppNum3" value="0"> 
        <input type="hidden" readonly="readonly" name="docAppNum4" id="docAppNum4" value="0"> 
        </td> 
       </tr> 
       <tr> 
        <td class="tbHead" rowspan="2">Agreement 
        <input type="hidden" name="docSettlement[]" id="docSettlement"> 
        </td> 
        <td class="tbContent" align="center" id="clickclick11"><input type="text" readonly="readonly" name="docAgg0" id="docAgg0" style="border:0; text-align:center;"></td> 
        <td class="tbContent" align="center" id="clickclick12"><input type="text" readonly="readonly" name="docAgg1" id="docAgg1" style="border:0; text-align:center;"></td> 
        <td class="tbContent" align="center" id="clickclick13"><input type="text" readonly="readonly" name="docAgg2" id="docAgg2" style="border:0; text-align:center;"></td> 
        <td class="tbContent" align="center" id="clickclick14"><input type="text" readonly="readonly" name="docAgg3" id="docAgg3" style="border:0; text-align:center;"></td> 
        <td class="tbContent" align="center" id="clickclick15"><input type="text" readonly="readonly" name="docAgg4" id="docAgg4" style="border:0; text-align:center;"></td> 
       </tr> 
       <tr> 
        <td class="tbContentTwo" align="center" id="clickclick16"><img id="docAggNumImg0"></img></td> 
        <td class="tbContentTwo" align="center" id="clickclick17"><img id="docAggNumImg1"></img></td> 
        <td class="tbContentTwo" align="center" id="clickclick18"><img id="docAggNumImg2"></img></td> 
        <td class="tbContentTwo" align="center" id="clickclick19"><img id="docAggNumImg3"></img></td> 
        <td class="tbContentTwo" align="center" id="clickclick20"><img id="docAggNumImg4"></img> 
        <input type="hidden" readonly="readonly" name="docAggNum0" id="docAggNum0" value="0"> 
        <input type="hidden" readonly="readonly" name="docAggNum1" id="docAggNum1" value="0"> 
        <input type="hidden" readonly="readonly" name="docAggNum2" id="docAggNum2" value="0"> 
        <input type="hidden" readonly="readonly" name="docAggNum3" id="docAggNum3" value="0"> 
        <input type="hidden" readonly="readonly" name="docAggNum4" id="docAggNum4" value="0"> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <table class="custbleone"> 
      <colgroup> 
       <col style="width: 10.8%;"> 
       <col style="width: 14.5%;"> 
       <col style="width: 4%;"> 
       <col style="width: 14.5%;"> 
       <col style="width: 56.2%;"> 
      </colgroup> 
      <tbody> 
       <tr> 
        <td class="tbHead" style="border-style: hidden solid solid solid;">Reference</td> 
        <td class="tbContent" id="clickclick21" colspan="4" valign="middle" style="border-style: hidden solid solid solid;"> 
        <input type="text" readonly="readonly" name="docReference[]" id="docReference" placeholder="Reference"></td> 
       </tr> 
       <tr> 
        <td class="tbHead">Implement<strong class="required">*</strong></td> 
        <td class="tbContent" colspan="4" valign="middle"> 
        <input type="text" readonly="readonly" name="docEnforcement" id="docEnforcement" style="border:0;"value="<security:authentication property="securityUser.fullName"/>"/></td> 
       </tr> 
       <tr> 
        <td class="tbHead">Period<strong class="required">*</strong></td> 
        <td class="tbContent" valign="middle" style="border-style: solid hidden solid solid;"><input type="text" readonly="readonly" class='ihalf dateOne' id="sDate" name="sDate" 
        placeholder="2016-01-01" style="display:inline;"><input type="hidden" name="docStartDate" id="docStartDate"></td> 
        <td class="tbContent" style="border-style: solid hidden solid hidden;"><p class="ptilde" style="display:inline;">&nbsp&nbsp~</p></td> 
        <td class="tbContent" valign="middle" style="border-style: solid hidden solid hidden;"><input type="text" readonly="readonly" class='ihalf dateTwo' id="eDate" name="eDate" placeholder="2016-01-01" style="display:inline;"> 
        <input type="hidden" name="docEndDate" id="docEndDate"></td> 
        <td class="tbContent" style="border-style: solid solid solid hidden;"></td> 
       </tr> 
       <tr> 
        <td class="tbHead" style="border-style: solid solid hidden solid;">Title<strong class="required">*</strong></td> 
        <td class="tbContent" valign="middle" colspan="4" style="border-style: solid solid hidden solid;"><input type="text" id="docTitle" name="docTitle" placeholder="Title" maxlength="80"/></td> 
       </tr> 
      </tbody> 
     </table> 
     <table class="custbleone"> 
      <colgroup> 
       <col style="width: 20%;"> 
       <col style="width: 20%;"> 
       <col style="width: 20%;"> 
       <col style="width: 20%;"> 
       <col style="width: 20%;"> 
      </colgroup> 
      <tbody> 
       <tr> 
        <td class="tbContent" style="text-align:center;">Annual Info Year</td> 
        <td class="tbContent" style="text-align:center;">Total Annual Leave</td> 
        <td class="tbContent" style="text-align:center;">Used Annual Leave</td> 
        <td class="tbContent" style="text-align:center;">Remain Annual Leave</td> 
        <td class="tbContent" style="text-align:center;">Request Annual Leave<strong class="required">*</strong></td> 
       </tr> 
       <tr> 
        <td class="tbContent"><input type="number" readonly="readonly" name="docAnnualYear" id="docAnnualYear" style="border:0; text-align:center;"></td> 
        <td class="tbContent"><input type="number" readonly="readonly" id="docTotalLeave" style="border:0; text-align:center;"></td> 
        <td class="tbContent"><input type="number" readonly="readonly" id="docUsedLeave" style="border:0; text-align:center;"></td> 
        <td class="tbContent"><input type="number" readonly="readonly" name="docRemainLeave" id="docRemainLeave" style="border:0; text-align:center;"></td> 
        <td class="tbContent"><input type="number" name="docRequestLeave" id="docRequestLeave" step="0.5" style="text-align:center;"></td> 
        <!-- step attribute does not work --> 
       </tr> 
      </tbody> 
     </table> 
     <table class="custbleone"> 
      <tbody> 
       <tr> 
        <td class="tbContentTwo" valign="top" style="border-style: hidden solid solid solid;"> 
        <textarea class="ckeditor" id="docText" name="docText"></textarea></td> 
       </tr> 
      </tbody> 
     </table> 
     <table class="custbleone"> 
      <colgroup> 
       <col style="width: 10%;"> 
       <col style="width: 10%;"> 
       <col style="width: 70%;"> 
       <col style="width: 10%;"> 
      </colgroup> 
      <tbody> 
       <tr> 
        <td class="tbContent" rowspan="3" valign="middle" style="border-style: hidden solid solid solid;"> 
        Attachment</td> 
        <td class="tbContent" valign="middle" style="border-style: hidden solid solid solid;"> 
         <input type="file" id="docFile1" name="docFile1" size="50" style="width:85px;"/></td> 
        <td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;"> 
         <input type="text" readonly="readonly" id="test1" class="test1" style="border:0;"/></td> 
        <td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;"> 
         <button type="button" id="clearDocFile1" style="display:none;">Delete</button></td> 
       </tr> 
       <tr> 
        <td class="tbContent" valign="middle" style="border-style: hidden solid hidden solid;"> 
         <input type="file" id="docFile2" name="docFile2" size="50" style="display:none; width:85px;"/></td> 
        <td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;"> 
         <input type="text" readonly="readonly" id="test2" class="test2" style="border:0;"/></td> 
        <td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;"> 
         <button type="button" id="clearDocFile2" style="display:none;">Delete</button></td> 
       </tr> 
       <tr> 
        <td class="tbContent" valign="middle" style="border-style: hidden solid solid solid;"> 
        <input type="file" id="docFile3" name="docFile3" size="50" style="display:none; width:85px;"/></td> 
        <td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;"> 
         <input type="text" readonly="readonly" id="test3" class="test3" style="border:0;"/></td> 
        <td class="tbContent" valign="middle" style="border-style: hidden solid solid hidden;"> 
         <button type="button" id="clearDocFile3" style="display:none;">Delete</button></td> 

       </tr> 
      </tbody> 
     </table> 
     <input type="hidden" name="currentUser" id="currentUser" value="<security:authentication property="securityUser.fullName"/>"/> 
     <input type="hidden" name="docDisplayAllSum[]" id="docDisplayAllSet"> 
     <input type="hidden" name="docDisplayApp[]" id="docDisplayApp"> 
     <input type="hidden" name="docDisplaySet[]" id="docDisplaySet"> 
     <input type="hidden" name="docDisplayAllApp[]" id="docDisplayAllApp"> 
     <input type="hidden" name="docSum[]" id="docSum"> 
     <input type="hidden" name="docDisplayAllSum[]" id="docDisplayAllSum"> 
     <input type="hidden" name="docDisplaySum[]" id="docDisplaySum"> 
     <input type="hidden" name="docAgreeType[]" id="docAgreeType"> 
     <input type="hidden" value="Annual Leave" id="docType" name="docType"/> 
     <input type="hidden" value="" id="docAttachment" name="docAttachment"/> 
     <input type="hidden" value="" id="docDone" name="docDone"/> 
     <input type="hidden" value="Report" id="docStatus" name="docStatus"/> 
     <input type="hidden" value="false" id="docRejected" name="docRejected"/> 
     <input type="hidden" name="fileName1" id="fileName1"/> 
     <input type="hidden" name="fileName2" id="fileName2"/> 
     <input type="hidden" name="fileName3" id="fileName3"/> 
    </div> 
    </form> 
</div>

的JavaScript

$(".addNewLetter").on("click",function(e){ 
    $("#letterDialog").dialog("open"); 
    $(".floatNone :button").blur(); 
    $('.today').text(parseDatetoString(new Date(),CONSTANT.YYYYMMDDHHMMSSFORMAT)); 

    var currrentRemain = parseFloat($("#docRemainLeave").val()); 
    if (currrentRemain <= 0) { 
     $(".btnSendDoc").hide(); 
    } else { 
     $(".btnSendDoc").show(); 
    } 

    $("#formAddNewDoc").validate({ 
     onclick : false, 
     ignore : [], 
     onkeyup : function(element) { 
      return true; 
     }, 
     onfocus : true, 
     rules : { 
      docTitle : {required : true, maxlength : 80}, 
      docStartDate : {required : true}, 
      docEndDate : {required : true}, 
      docApproval : {required : true}, 
      docEnforcement : {required : true}, 
      docRequestLeave : {required : true, min: 0.5, max: currrentRemain} 
     }, 
     invalidHandler : function(e, validator) { 
      if (!validator.numberOfInvalids()) { 
       return; 
      } 
      $('html, body').animate({ 
       scrollTop: $(validator.errorList[0].element).offset().top -30 
      }, 1000, function(){ 
       $(validator.errorList[0].element).focus(); 
      }); 
     } 
    }); 
}); 

initDialog : function(){ 
    $("#letterDialog").dialog({ 
     autoOpen: false, 
     modal: true, 
     width : 1000, 
     resizable: false, 
     close: function(event, ui) { 
       $(this).dialog("close"); 
     } 
    }); 
}

在接下來的頁面中，如果我點擊離開應用程序圖標，年休假彈出顯示出來。 enter image description here

enter image description here

然而，當我點擊右上側的輪廓圖標，userPopup顯示不出來。

它看起來像點擊事件不會因爲jQuery UI模式對話框而觸發。

我該如何解決這個問題？

我檢查了this post，但我不確定setTimeout是否正確，使用正確的方法。

請給我一些建議。

編輯：

忘記展示的InitDialog所以我只是將它加入下JavaScript部分。

我將模式選項設置爲false，但它僅刪除模式，但當我單擊它時，該圖標仍不會觸發。

來源

2016-01-29 boomboomboom

+0

此行爲。你有沒有複製點擊處理程序？你可以嘗試如果是這種情況，只需使用unbind（）就像在這裏的答案：https://stackoverflow.com/questions/14969960/jquery-click-events-firing-multiple-times – Olof

回答

0

不知道我是否足夠好。 似乎彈出的代碼​​是一個模式對話框。

您是否嘗試將模式選項設置爲false以重新嘗試？

像下面的代碼：當點擊事件被觸發偶數的時間可以發生 $("#letterDialog").dialog('option', 'modal', false).dialog("open")

來源

2016-01-29 08:58:20 QinBX

+0

嗯，我做到了。當我點擊該userPopup圖標時，仍然沒有任何反應。也許這不是jQuery UI模式問題。 – boomboomboom

+0

如果你可以將演示代碼移動到jsfiddle.com或類似的東西，這將有所幫助。 – QinBX

相關問題

 相關問題