jquery 위젯 팩토리에서 다시 초기화하는 방법

일부 맞춤 옵션을 사용하여 부트 스트랩 모달에 콘텐츠를로드하는 위젯을 만들었습니다. 첫 번째 클릭에서 올바르게 작동합니다. 그런 다음 같은 페이지에 다른 버튼으로 다른 콘텐츠를로드하려고했습니다. 그러나 이전에로드 된 메시지를 보여줍니다. 어떻게 해결할 수 있을까요? 아래 내 코드를 확인하십시오.jquery 위젯 팩토리에서 다시 초기화하는 방법

플러그인 코드

$(function() { 
$.widget("custom.modalLoad", { 
     // default options 
     options: { 

      img: '', 
      des: '', 
      desTag: '<h5>', 

     }, 

     _create: function() { 
      var t = this; 
      t._modal = $('<div id=\'learnModal\' class=\'modal fade\' role=\'dialog\'> '); 

      t._modalDialog = $('<div class=\'modal-dialog modal-lg\'>'); 

      $(t._modal).append(t._modalDialog); 

      t._modalContent = $('<div class=\'modal-content\'>'); 

      $(t._modalDialog).append(t._modalContent); 

      t._modalHeader = $('<div class=\'modal-header\'>' + 
       '<button type=\'button\' class=\'close\' data-dismiss=\'modal\'>&times;</button>' + 
       '<h4 class=\'modal-title\'>Modal Header</h4>' + 
       '</div>'); 

      $(t._modalContent).append(t._modalHeader); 


      t._modalBody = $('<div class=\'modal-body\'>'); 

      t._modalInside = $('<div class=\'row\'>'); 

      t._modalImgDiv = $('<div class=\'col-md-6\'>'); 

      t._modalImg = $('<img />'); 
      $(t._modalImg).attr('src', t.options.img); 
      $(t._modalImgDiv).append(t._modalImg); 

      t._modalDesDiv = $('<div class=\'col-md-6\'>');    
      t._modalDes = $(t.options.desTag); 
      $(t._modalDes).append(t.options.des); 
      $(t._modalDesDiv).append(t._modalDes); 

      $(t._modalBody).append(t._modalInside); 
      $(t._modalInside).append(t._modalImgDiv); 
      $(t._modalInside).append(t._modalDesDiv); 

      $(t._modalContent).append(t._modalBody); 


      t._modalFooter = $('<div class=\'modal-footer\'>' + 
       '<button type=\'button\' class=\'btn btn-default\' data-dismiss=\'modal\'>Close</button>' + 
       '</div>'); 

      $(t._modalContent).append(t._modalFooter); 
      t.element.append(t._modal); 


     }, 

     _setOption: function() { 

      $(this._modalImg).attr('src', this.options.img); 

      $(this._modalDes).append(this.options.des); 

     }  


}); 
});

의 HTML DIV 버튼,

<button class="button-learn" id="sec-1-single" data-toggle="modal" data-   
target="#learnModal">LEARN MORE</button> 

<button class="button-learn" id="sec-1-multi" data-toggle="modal" data-   
target="#learnModal">LEARN MORE</button> 

    <div id="modal-load"> </div>

호출 방법, 내가 위젯을 다시 초기화해야 할 일은

$('#sec-1-single').on('click', function() { 

    $("#modal-load").modalLoad({ 
     img: 'img/single-modal.png', 
     des: 'Lorem ipsum dolor sit amet', 

    }) 
}); 

$('#sec-1-multi').on('click', function() { 

    $("#modal-load").modalLoad({ 
     img: 'img/client-icon.png', 
     des: 'Lorem ipsum dolor sit qui officia deserunt mollit anim id est laborum', 

    }) 
});

출처

2017-10-03 Udara

내가 좋아하는 _setOption 방법을 변경하여 내 문제를 해결 한

_setOption: function(key, value) { 
      var t = this; 

      if (key == "img") { 
       $(t._modalImg).attr('src', value); 
      } 

      if (key == "des") { 
       $(t._modalDes).remove(); 
       t._modalDes = $(t.options.desTag); 
       $(t._modalDes).append(value); 
       $(t._modalDesDiv).append(t._modalDes); 
      } 

     }

아래

출처

2017-10-04 11:07:24 Udara

jquery 위젯 팩토리에서 다시 초기화하는 방법

답변

관련 문제