如何正确替换动态创建的元素的文本？
我的代码 - 小提琴
$(function() {
var makeSlider = function(params) {
var defaults = {
id: 1,
amountPurchases: 0,
pricePlus: 0,
offset: 140,
onStart: function(data) {
//console.log("onStart");
irsSingleNew();
}
};
var options = $.extend({}, defaults, params);
var rangeContainer = $('.range-slider-container-' + options.id);
var rangeDiscount = $('.range-discount-' + options.id);
// I'm trying to replace content .irs-single
// But replacing the text in my text does not happen
function irsSingleNew() {
var irsSingle = rangeContainer.find('.irs-single');
var irsSingleAmountPurchases = irsSingle.html('<span class="irs-single">' +options.amountPurchases+ ' $' + '</span>');
console.log(options.amountPurchases);
}
rangeDiscount.ionRangeSlider({
type: "single",
grid_snap: true,
postfix: " $",
onStart: options.onStart
});
rangeContainer.find('.irs').on('change click', '.irs', function() {
$(this).append('<span class="irs-price-plus">+' + options.pricePlus + ' $</span>');
var irsSingle = rangeContainer.find('.irs-single'),
irsSingleOffset = irsSingle.position(),
irsSingleOffsetLeft = irsSingleOffset.left;
//console.log(irsSingleOffsetLeft);
var irsPricePlus = rangeContainer.find('.irs-price-plus');
irsPricePlus.css({
left: irsSingleOffsetLeft + options.offset + 'px'
});
}).trigger('click');
}
var rangeSliderDiscount1 = makeSlider({
id: 1,
amountPurchases: 10,
pricePlus: 40
});
var rangeSliderDiscount2 = makeSlider({
id: 2,
amountPurchases: 20,
pricePlus: 120
});
var rangeSliderDiscount3 = makeSlider({
id: 3,
amountPurchases: 40,
pricePlus: 120
});
});body {
padding: 25px;
}
.range-slider-container {
margin-bottom: 55px;
}
.range-slider-container .irs .irs-line,
.range-slider-container .irs .irs-line-left,
.range-slider-container .irs .irs-line-mid,
.range-slider-container .irs .irs-line-right {
height: 10px;
background: #eee;
}
.range-slider-container .irs .irs-bar,
.range-slider-container .irs .irs-bar-edge {
height: 10px;
background: #A4A4A4;
}
.range-slider-container .irs .irs-line,
.range-slider-container .irs .irs-bar-edge {
border-radius: 10px;
}
.range-slider-container .irs .irs-bar,
.range-slider-container .irs .irs-bar-edge {
border-radius: 10px 0 0 10px;
}
.range-slider-container .irs .irs-min,
.range-slider-container .irs .irs-max,
.range-slider-container .irs .irs-from,
.range-slider-container .irs .irs-to,
.range-slider-container .irs .irs-single {
top: auto;
bottom: -20px;
}
.range-slider-container .irs .irs-grid {
bottom: auto;
top: -8px;
}
.range-slider-container .irs .irs-min,
.range-slider-container .irs .irs-max,
.range-slider-container .irs .irs-grid-pol {
display: none;
}
.range-slider-container .irs .irs-grid-text {
color: #000;
font-size: 11px;
}
.range-slider-container .irs .irs-grid-text:after {
content: '%';
display: inline-block;
vertical-align: top;
}
.range-slider-container .irs .irs-grid-text.js-grid-text-0 {
left: 7px !important;
}
.range-slider-container .irs .irs-slider {
width: 1px;
height: 10px;
top: 25px;
background: #A4A4A4;
}
.range-slider-container .irs .irs-single {
top: auto;
font-weight: 700;
bottom: -25px;
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
background: #fff;
color: #000;
width: 115px;
font-size: 12px;
text-align: center;
line-height: 1.5;
z-index: 99;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .2);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .2);
}
.range-slider-container .irs [class*=irs-price-plus] {
position: absolute;
top: 125%;
font-weight: 700;
font-size: 11px;
font-weight: 700;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinNice.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.min.css" rel="stylesheet"/>
<div class="range-slider-container range-slider-container-1">
<input type="text" class="range-discount-1" name="rangeDiscount-1" value="1;21" data-from="5" data-min="1" data-max="21" data-step="2" data-grid="true">
</div>
<div class="range-slider-container range-slider-container-2">
<input type="text" class="range-discount-2" name="rangeDiscount-2" value="1;21" data-from="7" data-min="1" data-max="21" data-step="2" data-grid="true">
</div>
<div class="range-slider-container range-slider-container-3">
<input type="text" class="range-discount-3" name="rangeDiscount-3" value="1;21" data-from="9" data-min="1" data-max="21" data-step="2" data-grid="true">
</div>我正在尝试替换内容.irs-single
var irsSingle = rangeContainer.find('.irs-single');
var irsSingleAmountPurchases = irsSingle.html('<span class="irs-single">' +options.amountPurchases+ ' $' + '</span>');
但是不会发生替换我文本中的文本
为什么这种方法不起作用？
如何正确替换此块的文本？
谢谢
我将很高兴得到任何帮助
这是一个小例子
for (var i = 1; i < 6; i++) {
var text = 'test'+i;
var t = $('<li />', {html: text}).appendTo('ul.justList');
$(t).text('hello')
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="justList"></ul>