javascript - 如何通过更改面板名称来更新 div 内容

Question

当我编辑面板名称时，我想更新 div 内容，这将具有选项卡窗格名称。我试图获取该值并将其更改为“onchange”，但我认为我做错了什么。 http://jsfiddle.net/agata666/5zLmtqby/139/

var $foo = $(".tab-pane");
var $newPanelDefault = $foo.clone();
var hash = 1;
$(".add").on("click", function() {
    var $newPanel = $newPanelDefault.clone();
    var hashClass = 'zone-panel-' + generateHash();
    $newPanel.find(".panel").data('hash', hashClass).attr("href",  "#" + (++hash)).text("Zone " + hash);
    $newPanel.attr("id", "tab" + hashClass);

    var nextTab = $('.tabs li').size()+1;
    $('<li class="' + hashClass + '"><a href="#tab' + hashClass + '" data-toggle="tab">Zone  ' + hash + ' <i class="fas fa-pencil-alt pencil"></i></a></li>').appendTo('.tabs');
    $($newPanel).appendTo('.tab-content');



   $(".pencil").click(function() {
        $(".nav-tabs li.active").attr('contenteditable',$(".nav-tabs li.active").attr('contenteditable')==='true'?'false':'true' );
     });

});


var panelDefault = document.querySelectorAll('.panel-default');
var exTabFirst = document.querySelectorAll('.exTabFirst');
var exTabSecond = document.querySelectorAll('.exTabSecond');
var addZoneButton = document.getElementById('add');


function generateHash() {
    return Math.random().toString(16).substr(-5);
}

addZoneButton.addEventListener('click', function () {
    var randomNumber = generateHash();
    panelDefault.innerHTML = 'panel panel-default foo template ' + randomNumber;
    exTabFirst.innerHTML = 'exTabFirst ' + randomNumber;
    exTabSecond.innerHTML = 'exTabSecond ' + randomNumber;
});

 $(".pencil").click(function() {
         $(".nav-tabs li.active").attr('contenteditable',$(".nav-tabs li.active").attr('contenteditable')==='true'?'false':'true' );
     });

你可以帮帮我吗？

标签： javascriptjquery