如何在最近追加的小孩组上设置功能

Question

我为预订机组编写了以下代码，效果很好。当我点击名为firstadd的类时，它会在页面下添加一个新的div。我的问题是最近添加不了的加号和减号。我想点击每个加号和减号，然后每个文本框的值发生变化。一样的div与类名：新 这里是我的代码片段：

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