Question

我为预订航班编写了以下代码，效果很好。当我点击调用firstadd的类时，它会在页面下追加一个新的div。我的问题是最近添加的加号和减号不起作用。我想点击每个加号和减号，然后每个文本框的值更改。和class一样的div：new 这是我的片段：

$(function() {
  var createChildDropdown = function(i) {

var $childDropdown = $('<div />', {
  'class': 'childs'
});
$childDropdown.append($('<label />', {
  'for': 'childDropdown-' + i
}).text('Child ' + i));
$childDropdown.append($('<select />', {
  'id': 'childDropdown-' + i
}));
var options = ['a', 'b', 'c'];
options.forEach(function(option, index) {
  $childDropdown.find('select').append($('<option />')
         .text(option).attr('value', index));
});
return $childDropdown;
};
var destroyChildDropdown = function($el, i) {
  $el.find('div.childs').get(i).remove();
};

$(".button-click a").on("click", function() {

  var html = '<div class="new">'+
                            '<label>'+
                        '<span>Adult</span>'+
                        '<input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672"  value="0" />'+
                        '<ul class="button-group button-click">'+
                    '<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>'+
                    '<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>'+
                        '</ul>'+
                            '</label>'+
                            '<label>'+
                        '<span>Child</span>'+
            '<input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672"  value="0" />'+
                        '<ul class="button-group button-click">'+
                    '<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>'+
                    '<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>'+
                        '</ul>'+
                            '</label>'+
                            '</div>';
$("#collectnew").append(html);


var button = $(this);
var oldVal = parseInt(button.closest("ul").prev().val());
var newVal = (button.text() == "+") ? oldVal + 1 : (oldVal > 0) ? oldVal - 1 : 0;
var total_value = "";

button.closest("ul").prev().val(newVal);

$(".travel").each(function() {
  var cat = $(this).prev('span').text();
  total_value += cat + ": " + $(this).val() + ", ";
});



total_value = total_value.substring(0, total_value.length - 2);
$(".main").val(total_value);
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label>
  Count Room
  <input type="text" name="no_travellers" class="main" value="Room:1, Adult:1" placeholder="" />
</label>
<br/>
<label>
  <span>Room</span>
  <input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672"  value="1" />
  <ul class="button-group button-click">
  <li><a href="#" class="small button secondary"><i class="fa fa-plus firstadd"><span class="hide">+</span></i></a></li>
  <li><a href="#" class="small button secondary"><i class="fa fa-minus  firstadd"><span class="hide">-</span></i></a></li>
  </ul>
</label>
<div id="collectnew">
   <div class="new" style="border:1px solid red;">
      <label>
        <span>Adult</span>
        <input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672"  value="0" />
        <ul class="button-group button-click">
            <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
            <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
        </ul>
    </label>


    <label>
        <span>Child</span>
        <input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672"  value="0" />
        <ul class="button-group button-click-child">
            <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
            <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
        </ul>
    </label>
  </div>
</div>
<div class="childDropdowns"></div>

Answer 1

$(".button-click a").on("click", function() {}

将此替换为

 $(document).on("click",".button-click a" ,function() {});

如何在最近添加

1 个答案: