jqueryウィジェットファクトリで再初期化する方法

Question

カスタムオプションを使用してブートストラップモーダルにコンテンツを読み込むウィジェットを作成しました。それは最初のクリックで正しく機能しています。それから別のコンテンツを同じページに別のボタンでロードしようとしました。しかし、それは以前にロードされたメッセージを表示します。どのように私はそれを修正することができます。以下の私のコードをチェックしてください。

プラグインコード、

$(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', 

    }) 
}); 

？

Answer 1

私は

_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); 
      } 

     } 

以下のような _setOption方法を変更することで、私の問題を修正しました