javascript - 输入范围不更新

问题描述

我的输入范围有问题。当我添加一个新的手风琴面板时，输入范围从第一个面板中获取值，我无法设置一个新面板。 https://jsfiddle.net/agata666/hu1cvy5n/17/

var $foo = $(".foo");
var hash = 1;
$(".add").on("click", function () {
    var $newPanel = $foo.clone();
    var hashClass = 'zone-panel-' + generateHash();
    $newPanel.find(".collapse").removeClass("in");
    $newPanel.find(".accordion-toggle").data('hash', hashClass).attr("href",  "#" + (++hash)).text("panel " + hash);
    $newPanel.find(".panel-collapse").attr("id", hash).addClass("collapse").removeClass("in");
    $($newPanel).addClass(hashClass);
    $("#accordion").append($newPanel.fadeIn());

});

var sliderOne = document.querySelector(".abc");
var outputOne = document.querySelector(".one");
sliderOne.oninput = function() {
    outputOne.innerHTML = sliderOne.value + '%';
}


var panelDefault = document.querySelectorAll('.panel-default');
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;

});

`你能帮帮我吗？

标签： javascriptjquery

您的事件处理程序不会被复制。然而 jQuery 确实有一个clone()功能。它也接受一个布尔值来复制事件处理程序。你可以很容易地使用 jQuery 的克隆功能来做到这一点。

clone()或clone(false)或clone(false, false)创建不带事件处理程序的选择的克隆。
clone(true)或clone(true, true)使用事件处理程序创建您的选择的克隆，包括子元素的事件处理程序
clone(true, false)使用事件处理程序创建您的选择的克隆，但不使用子元素的事件处理程序。

这是一个例子。

$(function(){

  //Onchange event handler to copy the value to a div to show to the user.
  $('.slider').on('change', function(){
    $(this).siblings('.slider_value').text($(this).val());
  });
  
  //Click event handler to clone a slider including event handlers and add to the html w
  $('#add').on('click', function(){
    $('.slider_wrapper').first().clone(true).appendTo('#sliders');
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sliders">
  <div class="slider_wrapper">
    <div class="slider_value">1</div>
    <input class="slider" type="range" min="0" max="100" step="1" value="15"/>
  </div>
</div>

<button id="add">Add</button>

javascript - 输入范围不更新

问题描述

解决方案

推荐阅读