Meat_roast_Engineer
40
2020-01-14 09:45:31
2
107

동적으로 생성된 태그에 이벤트를 추가했는데 발생한 예기치 못한 현상에 대해 질문드립니다.


동적으로 생성된 태그에 이벤트를 추가했는데 발생한 현상에 대해 질문드립니다.


안녕하세요.


이 동작의 최초 의도는 alopex-grid라는 js를 사용하여 DB에서 받아온 값을 기준으로 그리드를 생성하려는 의도였습니다.


그러나 alopexgrid에서 제공하는 button 태그를 사용하여 여러개의 버튼을 만들수 없어 

억지로 하나의 버튼을 만든 뒤 더블 클릭 시 하나의 버튼이 더 생성되는 로직을 만들었습니다.


아래가 JSP 의 js 코드입니다.


function makeContentsGrid() {

       //

       $('#videoGrid').alopexGrid({

     height : "rowPadding",

     numberingColumnFromZero : false,

              rowPadding: 3,

              rowInlineEdit: true,

              autoColumnIndex: true,

              fullCompareForEditedState:true,

              defaultColumnMapping: {

                     editable : true

              },

              autoColumnIndex: true,

              rowIndexColumnFromZero: false,

              alwaysShowVerticalScrollBar: true,

              fitTableWidth : true,

              //columnMapping : columnMappingArray

           columnMapping : [ {

                     selectorColumn : true,

                     width : 20

              }, {

                     align : 'center',

                     title : 'No',

                     width : 20,

                     numberingColumn : true

              }, {

                     key : 'title',

                     title : '제목(설명)',

                     width : 70

              }, {

                     title : '클라우드URL',

                     width : 100,

                     align : 'center',

                     render : function(value, data, mapping) {

                           if (!isUndefinedOrNullOrEmpty(data.file.fileName)) {

                                  return getFileDownloadURL(data.file.filePath);

                           }

                     }

              }, {

                     key : 'academyKey',

                     title : 'academyKey',

                     align : 'left'

              },

              {

                     key : keywordVal ,

                     title : 'script 추출',

                     align : 'center',

                     width : 100,

                     editable : function(value, data, mapping) {

                           /*ExtractionRequest False일때 radio 버튼 생성*/

                           if (true == false) {

                                  console.log("alopexui-radio");

                                  return {

                                         type:"radio",

                                         rule : [{value:"추출"    , text:"추출"},

                                                       {value:"미추출", text:"미추출"}]

                                  }

                           }

                           //ExtractionRequest == True && extractionStatus == "success" 일때

                           else if(true == true){

                                  /* scriptOpen == true 일때 버튼 생성*/

                                  if(true == true){

                                         console.log("button");

                                         return {

                                                type: 'text',

                                                attr: { 'type': 'button', 'class': 'script-open-true', 'id' : 'script-open-true'}

                                         }

                                  }


위 코드를 통해 grid 내에 버튼을 생성하였습니다.



                                  /*scriptOpen == false 일때*/

                                  else if(true == false){

                                         return {type :       'text',

                                                       attr : {'type': 'button', 'class': 'script-open-false'}

                                         };

                                  }

                           console("123");

                           }

                           //ExtractionRequest == True && extractionStatus != "success"

                           else if (true == false) {

                                  if (extractionStatus == 'fail'){

                                         return {type :       'text',

                                                       attr : {'type': 'button', 'class': 'extraction-status-fail'}

                                         }

                                  }else if (extractionStatus == 'pending'){

                                         return {type :       'text',

                                                attr : {'type': 'button', 'class': 'extraction-status-pending'}

                                         }

                                  }else if (extractionStatus == 'ready'){

                                         return {type :       'text',

                                                attr : {'type': 'button', 'class': 'extraction-status-ready'}

                                         }

                                  }

                           };

                     }

              } ]//title : 'script 추출',

       });




그리고 


$(document).ready(function() {

       //

       makeKeywordScriptPopBtn();





function makeKeywordScriptPopBtn () {

              $(document).on("dblclick",".alopexgrid-cell",function(){

                     $('#script-open-true').after("<button id = 'keywordScriptPopBtn', onclick='keywordScriptPopup()'>완료script</button>");

                     $('#script-open-false').after("<button id = 'keywordScriptPopBtn', onclick='keywordScriptPopup()'>완료script</button>");

            });

};



을 통해 더블 클릭시 하나의 버튼이 추가로 생성되도록 만들었습니다.



그렇게 만들어진 버튼은 다음과 같습니다.


                    <div class="cell bodycell alopexgrid-cell alopexgrid362 row-even edited focused editing editingcell align-center cell-ui-editable cell-lastcolumn"

                    data-alopexgrid-root="alopexgrid350" id="alopexgrid350-0-5" data-alopexgrid-rowindex="0" title="false" data-alopexgrid-columnindex="5" 

    data-alopexgrid-dataindex="0" data-alopexgrid-dataid="alopexgrid362" data-alopexgrid-key="scriptOpen" style="width: 258px; height: 34px; left: 801px; top: 

    38px;">         

      //alopex-grid를 통해 성성된 grid div


                        <input class="script-open-true" type="button" name="alopexgrid381" id="script-open-true" value="false" 

    data-alopexgrid-inscribe="alopexgrid350,alopexgrid362,5,null">        


//                          else if(true == true){    //를 통해 만든 버튼

                                  /* scriptOpen == true 일때 버튼 생성*/

                                  if(true == true){

                                         console.log("button");

                                         return {

                                                type: 'text',

                                                attr: { 'type': 'button', 'class': 'script-open-true', 'id' : 'script-open-true'}

                                         }

                                  }




                            <button id="keywordScriptPopBtn" ,="" onclick="keywordScriptPopup()">완료script</button>

        // makeKeywordScriptPopBtn을 통해 만든 버튼

                    </div>





그런데 이때 "keywordScriptPopBtn"    버튼을 클릭하게 되면 현재 페이지에서 파라미터가 변경된 채 해당페이지(기존에 동작하고 있던 동일 페이지)로 이동합니다.

parameter가 바뀐채로요.

바뀐 파라미터는 다음과 같습니다.



기존 

contentDetailMgt.do?contentId=CN-00FN&pageNum=1&pagingCategory=&pagingSubCategory=&pagingTitle=&menuId=HRD-ADM-M02-05


이동 후

/contentDetailMgt.do?pageNum=1&source=&title=asd&introduction=asd&progressControll=1&commentControll=1&alopexgrid595=ads&alopexgrid596=1239876&tag=



onclick event 시 바인딩 되는 "keywordScriptPopup" 은 아래와 같고 아무런 동작도 하지 않습니다.


function keywordScriptPopup(){

       console.log("동작 확인");

       console.log(checker && checker.dblclick);

       //goReturnPage();

};



이유를 찾지못해 선배 개발자분들께 여쭤봅니다.

  1. 동적으로 생성된 버튼에 dblclick event가 아닌 해당 버튼이 생성되는 시점에 버튼이 같이 생성되게 하는 방법은 무엇인가요?

  1. 어떻게 해야 정의하지 않은 페이지 이동 동작을 없앨수 있나요?

0
0
  • 답변 2

  • Dive_Drink_Develope
    3k
    2020-01-14 10:08:49

    1. .alopexGrid 내부 버튼생성코드 찾아서 수정


    2. 구글 검색어 prevent button submit

    1
  • Meat_roast_Engineer
    40
    2020-01-14 10:48:41

    Dive_Drink_Develope님 진심으로 감사 드립니다.


    alopexgrid 수정은 권한이 없어 하지 못했지만


    prevent button submit 관련 구글링 통해 페이지 이동 동작은 없앨 수 있었습니다.


    기초적인 기능인데 공부가 부족해 부끄러운 질문을 올렸네요.


    그럼에도 친절하게 답변 달아주셔서 감사드립니다.

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.