вкладка jQuery не работает после замены externalHTML

Question

Вкладка jQuery не работает после замены outerHTML div из следующего примера: Изменений в externalHTML нет, но изменение настроек вкладки не работает. Зачем?

Когда я пробовал, как клик работает, но HTML не заменяет вкладку.

 $("#prod5").tabs({ 
           create: function (event, ui) { 
            debugger; 
            event.target.innerHTML == jqXHR; 

           } 

          }); 

      function data() { 
      var replce = $("#tabs").html(); 
      $("#tabs").html(replce);  
        $("#tabs").tabs('refresh'); 
     } 
     <div id="tabs" class="col eleven-cols tabs-tt"> 
<div class="col three-cols contentfontmedium translatetext" id="prod5"> 


    <ul class="col three-cols contentfontmedium" id="prod6"> 

     <li><a href="#tabs-1">1</a></li> 
     <li><a href="#tabs-2">2</a></li> 

    </ul> 

</div> 

<div id="subMenus"> 
    <div id="tabs-1" class="col eight-cols" style="padding-right: 0%; padding-top: 0%;"> 
     tab1 
    </div> 

    <div id="tabs-1" class="col eight-cols" style="padding-right: 0%; padding-top: 0%;"> 
     tab2 
    </div> 

</div> 
</div> 

Я получаю outerHTML с помощью JQuery»

$("#" + id + "")[0].outerHTML; 

И замена outerHTML с помощью JQuery

$("#" + id + "")[0].outerHTML = replcetext; 

но изменение вкладки не работает после замены.

Ниже outerHTML перед тем Ответ:

 function data() { 
      var replce = $("#tabs").html(); 


      $("#tabs").tabs({ 
       create: function (event, ui) { 
        debugger; 
        event.target.innerHTML == replce; 
        // $("tabs").replaceWith(jqXHR); 
       } 

      }); 


     // $("#tabs").html(replce.toString()); 
     //// $('#tabs').tabs('load', $('#tabs').tabs('option', 'active')); 
     //// $('#tabs').html($(replce).html()); 
     // // $("#tabs").tabs('refresh'); 
     // $("#tab-1").load(""); 
     // $("#tab-2").load(""); 
     //  $("#tabs").tabs().addClass("ui-helper-clearfix"); 
     //  $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); 

     // // var template = Handlebars.compile(replce); 
     // debugger; 
      // $('#tabs').html(template(data)); 
     } 

Answer 1

Когда содержимое заменяется, необходимо инициализировать плагин снова

$("#" + id).replaceWith(replcetext).tabs(); 

При замене весь HTML, то связанные вставные структуры данных уничтожаются, поэтому он не работает

Answer 2

@Stpdevi, Почему вы пытаетесь заменить внешний HTML? любая причина для этого?

Замените название вкладки следующим образом.

$('#ui-id-2').html('Tab Name'); 

После замены текста вкладки обновите вкладку. refer here.

$("#prod5").tabs("refresh"); 

Answer 3

Вы можете попробовать другие варианты, такие как руле JS для создания HTML-

я мог неправильно понять ваш вопрос. Я думаю, что ответ «Арун П. Джонни» может сработать.

Предположим, что вы просто хотите изменить заголовок и содержание вкладки. вы можете использовать beforeActivate событие,

следующее HTML-код

$(function() { 
 
      initTabs(); 
 
     }); 
 

 
     function initTabs() { 
 

 

 
      var tabContent = $("#divInitial").html(); 
 
      $("#tabs").tabs({ 
 
       create: function (event, ui) { 
 
        // here is your original example, the tab's structure will be destroy 
 
        // event.target.innerHTML = tabContent; // that is main content 
 

 
       }, 
 
       beforeActivate: function (event, ui) { 
 
        var tabIndex = ui.newTab.index(); // get tab index:JQuery UI 1.9 or later 
 
        var content = $("#divContentToBeReplace").html(); 
 
        $("#fragment-" + parseInt(tabIndex + 1)).html("tab" + parseInt(tabIndex + 1) + content); // Change Tab content 
 
        var title = $("#tabs ul li").eq(tabIndex).text();     
 
        $('#tabs ul li:nth-child(' + parseInt(tabIndex + 1) + ') a').text('Other text'); //Change Tab title 
 
       } 
 
      }); 
 
     }

<link href="https://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="tabs"> 
 
     <ul> 
 
      <li><a href="#fragment-1">One</a></li> 
 
      <li><a href="#fragment-2">Two</a></li> 
 
      <li><a href="#fragment-3">Three</a></li> 
 
     </ul> 
 
     <div id="fragment-1"> 
 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 
     </div> 
 
     <div id="fragment-2"> 
 
      tab2 contents 
 
     </div> 
 
     <div id="fragment-3"> 
 
      tab3 contents 
 
     </div> 
 
    </div> 
 

 
    <div id="divContentToBeReplace" style="display:none"> 
 
     contents data changed. 
 
    </div> 
 

 
    <div id="divInitial" style="display:none"> 
 
     init 
 
    </div>

Answer 4

Поместите свой яваскрипта код в документе готовой функции, как показано ниже, и в конце страницы.

$(document).ready(function() { 
    var replce = $("#tabs").html(); 

    $("#tabs").tabs({ 
     create: function (event, ui) { 
      debugger; 
      event.target.innerHTML == replce; 
      // $("tabs").replaceWith(jqXHR); 
     } 

    }); 

}); 

Answer 5

Итак, первое предложенное мной решение не работает. Вот новый, который уничтожает и воссоздает вкладки.

В этом случае я:

• получения текущих настроек вкладки
• уничтожить Вкладки
• Смените outerhtml с методом
• затем воссоздать язычки с сохраненными настройками

var id = 'prod5'; 
 
$('#' + id).tabs({ 
 
    active: 2 
 
}); 
 

 
function clickme() { 
 
    // save settings 
 
    var options = $('#' + id).tabs("option"); 
 
    // destroy tabs 
 
    $('#' + id).tabs('destroy') 
 
    // get outerhtml 
 
    var html = $('#' + id)[0].outerHTML; 
 
    // apply a random change 
 
    html = html.replace(/goo/g, 'zar'); 
 
    // replace the outerHTML, thus the entire element 
 
    $('#' + id)[0].outerHTML = html; 
 
    // recreate tabs 
 
    $('#' + id).tabs(options) 
 
} 
 

 
$('#btnReplace').click(clickme);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"/> 
 
<div class="col three-cols contentfontmedium translatetext" id="prod5"> 
 
    <nav class="nav-menu touchAction contentfontmedium contentZoom" id="nav2" style="width:100%;"> 
 
    <ul class="col three-cols contentfontmedium" id="prod6"> 
 
     <li><a href="#tabs-1">1</a></li> 
 
     <li><a href="#tabs-2">2</a></li> 
 
     <li><a href="#tabs-3">3</a></li> 
 
     <li><a href="#tabs-4">4</a></li> 
 
     <li><a href="#tabs-5">5s</a></li> 
 
     <li><a href="#tabs-6">6 
 
<br />goo</a></li> 
 
    </ul> 
 
    <div id="tabs-1"> 
 
     Content 1 
 
    </div> 
 
    <div id="tabs-2"> 
 
     Content 2 
 
    </div> 
 
    <div id="tabs-3"> 
 
     Content 3 
 
    </div> 
 
    <div id="tabs-4"> 
 
     Content 4 
 
    </div> 
 
    <div id="tabs-5"> 
 
     Content 5 
 
    </div> 
 
    <div id="tabs-6"> 
 
     Content 6 
 
    </div> 
 
    </nav> 
 
</div> 
 
<button id="btnReplace"> 
 
    Replace goo with zar 
 
</button>

Вы также можете получить HTML-код, прежде чем уничтожать вкладки, поскольку вкладки пользовательского интерфейса jQuery добавляют только некоторые атрибуты исходного содержимого и обертывают их в другой. В крайнем случае вы можете заменить внешнийHTML, а затем уничтожить и воссоздать вкладки, как здесь: https://jsfiddle.net/evvqqrLf/4/, но это может иметь некоторые неожиданные побочные эффекты. В основном это код, который нужно:

// create tabs 
    // (you need this in order to restore the state for the replaced element) 
    $('#' + id).tabs(); 
    // destroy tabs 
    $('#' + id).tabs('destroy'); 
    // recreate tabs 
    $('#' + id).tabs(options); 

И, конечно, нужно, чтобы получить варианты исходных закладках когда-то, прежде чем заменять HTML: var options = $('#' + id).tabs("option");

И да, я знаю, что вызов .tabs(), .tabs('destroy'), а затем .tabs() снова немного перебор, но я хотел как можно больше очистить исходную инициализацию. В случае, если вы хотите рисковать, просто использовать $('#' + id).tabs(options);

Answer 6

, если вы используете селектор для идентификатора (#ID) есть не нужно указать первый элемент найден

Вместо

$("#" + id + "")[0] 

использовать

$("#" + id + "") 

и назначить содержание HTML использовать

$("#" + id + "").html("<div>example</div>") 

надеюсь, что это помогает