javascript - 一旦表单被重置，选择的 Action 监听器

Question

我有一个带有输入、选择和单选的服务器表单，它偶尔需要重置，所以我使用 jQuery 函数 .trigger('reset')这很有效，除了一旦发生这种情况我似乎无法触发操作。例如.on("reset")或.on("change")在我的<select>'s上。

看看下面的例子；单击选择字段并选择某些内容，然后输入名称并单击重置，该值将重置，但操作 reset或change <select>'s 上没有被调用.

$('select[name="opt"]').on("click reset change",function(){
  
  var selected = $(this).val();

  $(".jobs>div").hide();       // Hide all jobs first.
  $(".jobs>."+selected).show(); // Show selected job.

});

$(".reset").on("click",function(){
  $('form.theff').trigger("reset");
});

.theff * {
  display:block;
  margin:10px;
}

.jobs>div {
  display:none;
  background:gray;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="theff">
  
    <input placeholder="Your name..">
    
    <select name="opt">
        <option selected>Select Job</option>
        <option value="banker">Banker</option>
        <option value="programmer">Programmer</option>
    </select>
  
    <div class="jobs">
      <div class="banker">
         Really? a banker?
      </div>
      <div class="programmer">
         Great, your a programmer!
      </div>
    </div>
  
    <button>Submit</button>
    <a href="#" class="reset">Reset</a>

</form>

Answer 1

表单不是选择，触发表单上的重置不会触发设置为完全不同的元素的事件处理程序。

你可能想做

$(".reset").on("click",function(){
    $('form.theff').get(0).reset();
    $('select[name="opt"]').trigger('change');
});