jqxnavigationbar is not intialized after calling destroy

[peter_pParticipant]

<div id='jqxnavigationbar'>
  <!--Header-->
  <div>Header 1</div>
  <!--Content-->
  <div>Content 1</div>
  <!--Header-->
  <div>Header 2</div>
  <!--Content-->
  <div>Content 2</div>
</div>
<div>
  <input style="margin-top: 20px;" type="button" id='jqxButton' value="Destroy" />
</div>

  $("#jqxnavigationbar").jqxNavigationBar({
    width: 400,
    height: 200,
    theme: 'energyblue'
  });
  $("#jqxButton").jqxButton({
    height: '30px',
    width: '100px',
    theme: 'energyblue'
  });
  $('#jqxButton').on('click', function() {
    $('#jqxnavigationbar').jqxNavigationBar('destroy');

    console.log('Again Open')

    $("#jqxnavigationbar").jqxNavigationBar({
      width: 400,
      height: 200,
      theme: 'energyblue'
    });

  });

Demo
http://jsfiddle.net/4cm0kb50/

[Peter StoevKeymaster]

Hi peter_p,

That’s expected. You remove the DOM Element with calling “destroy” so there is no DOM element from which to create jqxNavigationBar i.e HTML Element with ID=”jqxnavigationbar” does not exist anymore after calling “destroy”.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[peter_pParticipant]

Ok, thank you so much Peter

Have a great day

[peter_pParticipant]

Is there any way to check, whether navigationbar is intialized before on same element, at present I am doing like this

if( $("#jqxnavigationbar").hasClass("jqx-navigationbar") )
{
      $("#jqxnavigationbar").jqxNavigationBar('destroy');
      $("#mydiv").append("<div id='jqxnavigationbar'>Some new contents</div>");
      $("#jqxnavigationbar").jqxNavigationBar();
}

[Author]

Posts