jQuery点击事件仅生效一次问题：需刷新页面才能再次触发

嘿，我来帮你拆解下这个问题～首先要澄清一点：你的resetChosen函数每次点击都会执行（不信你多点击几次，alert会一直弹），真正没生效的是「重置Chosen字段」的操作，而不是函数只运行一次。

核心原因 #

你在重置时用了$('.chosen').val(' ')——这里设置的是空格字符，而不是空值。第一次执行后，Chosen对应的select元素的值已经变成了空格；当你再次调用这个方法时，你是把值设置成和当前一样的空格，Chosen插件会判断「值没有变化」，所以trigger('chosen:updated')并不会触发下拉框的重新渲染，看起来就像重置失效了。

修复方案 #

只需要把空格改成空字符串即可，这样每次都会强制将select的值设为空，不管之前是什么状态，Chosen都会响应chosen:updated事件完成重置：

$(document).ready(function () { 
  function resetChosen() { 
    // 把 ' ' 改成 ''，设置为空值
    $('.chosen').val('').trigger('chosen:updated'); 
    alert('how many times will this work?'); 
  } 
  $('#submitter').on('click', function (clickEvent) { 
    setTimeout(resetChosen, 500); 
  }) 
})

如果你的表单场景里需要保留某些默认值，也可以根据需求设置成对应的默认选项值，比如val('default-option-value')，只要保证每次设置的值和当前值不同（或者强制清空），Chosen就会正确更新。

内容的提问来源于stack exchange，提问作者m0lochwalker