jQuery：将事件关联到现有元素和新元素

Question

我有一个代码可以更改输入值，点击+/-符号。当值为1时，字符-会消失。

我怀疑：我希望加载页面时' - '也会消失。怎么做？

我已尝试过，使用trigger以下方式，但它不起作用：

$(document).on('change', 'input', function() {
 //...
}).trigger('change');

这是我的代码：

$(document).on('change', 'input', function() {

  if ($(this).val() == 1) {
      $('.substract').hide();
  }   
});


$('.add').on('click', function() {
    
    var old_value = parseInt($('input').val());
    $('input').val(old_value + 1).change();

})

$('.substract').on('click', function() {
    
    var old_value = parseInt($('input').val());
    $('input').val(old_value - 1).change();
})
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  type="text" value="1">
<span class="add">+</span>
<span class="substract">-</span>

Answer 1

我建议你使用CSS

.substract { display:none; }

但是使用jQuery，只需触发change的{​​{1}}事件。由于您使用的是事件委派，因此绑定事件为input而不是document，因此input无效。

.trigger('change');

 $('input').change();

$(document).on('change', 'input', function() {

  if ($(this).val() == 1) {
    $('.substract').hide();
  }
});


$('.add').on('click', function() {

  var old_value = parseInt($('input').val());
  $('input').val(old_value + 1).change();

})

$('.substract').on('click', function() {

  var old_value = parseInt($('input').val());
  $('input').val(old_value - 1).change();
})

$('input').change();

Answer 2

为什么不在加载时使用样式：

<span class="substract" style='display:none'>-</span>

或者如果你做了jQuery

jQuery(document).ready(function($){
     $('.substract').hide();
}

请记住等待DOM准备好以确保元素已加载。我将转到第一个版本并避免该用户看到该按钮，然后在几秒钟后看到它消失

Answer 3

通过添加

来隐藏负载

<span class="substract" style="display: none;">-</span>，

然后添加

if ($(this).val() == 1) {
    $('.substract').hide();
}else{
    $('.substract').show(); // add this line
}

Demo

Answer 4

切换课程：

$(document).on('change', 'input', function() {
      $(this).nextAll('.substract').first().toggleClass('hidden', this.value == 1);
});

HTML：

<span class="substract hidden">-</span>

CSS：

span.hidden {
    display: none;
}

DEMO