如何正确替换动态创建的元素的文本？

Question

如何正确替换动态创建的元素的文本？

我的代码 - Fiddle

$(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>');

但是替换我的文本中的文本并没有发生

为什么这个方法不行？

如何正确替换此块的文字？

谢谢

我很乐意提供任何帮助

Answer 1

这是一个小例子

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>

如何正确替换动态创建的元素的文本？

How to correctly replace text for a dynamically created element?

html

css

jquery

ion-range-slider