javascript - Jquery 条件不适用于附加的 div

Question

http://jsfiddle.net/cZDfe/

我有一个 html 和 jquery 代码... 我的需要是 1.当按下加号按钮添加相同的表单组元素(这是有效的) 2.当选择的选项是“Between”时显示第二个输入框..(在这种情况下只有第一组工作正常，添加第二组时还有一个问题，然后更改第一组选择，第二组也是改变了。)

$(document).ready(function () {
$('.condition-change').change(function () {
    if ($('select[name="SearchCondition"]').find('option[value="<>"]').prop("selected") == true) {
        $('.second-value').css("display", "block");
    }
  });
     $(document).on('click', '.btn-Add', function () {
        $(document).find('.btn-Add').remove();
        $('#othersearch').append('<div class="form-group"><select class="form-control input-sm"><option value=">=">Greater than or equal to</option><option value="<=">Less than or equal to</option><option value="<>">Between</option></select><input type="text" class="form-control input-sm" placeholder="Value"> <input type="text" class="form-control input-sm second-value" placeholder="Value" style="display:none;"><input type="button" class="btn btn-default btn-Add" value="+" /></div></br>'); // end append           
    });
});

  <form class="form-inline">
               <div class="form-group">
               <select class="form-control input-sm condition-change" name="SearchCondition">
                   <option value=">=">Greater than or equal to</option>
                   <option value="<=">Less than or equal to</option>
                   <option value="<>">Between</option>
               </select>
               <input type="text" class="form-control input-sm" placeholder="Value">
               <input type="text" class="form-control input-sm second-value" placeholder="Value" style="display:none;">
               <button type="button" class="btn btn-default btn-Add">+</button>

        </div>
        <div id="othersearch"></div>
   </form>

Answer 1

第一个问题是您没有隔离组，因此当您更改第一个组的选择时，它会显示所有组的输入。您遇到的第二个问题是您只将更改处理程序绑定(bind)到第一个选择，而不是所有选择。解决这个问题的最简单方法(虽然不一定是最好的)可能是使用 on 而不是 change 然后仅更新已更改组中输入的显示: http://jsfiddle.net/cZDfe/2/