jQuery 绑定方法无法按预期工作答案

【问题标题】：jQuery bind method does not work as expectedjQuery 绑定方法无法按预期工作
【发布时间】：2021-04-23 15:25:26
【问题描述】：

无论选择与否，我都需要为选择下拉菜单执行不同的操作！我尝试了这段代码，它在JSFiddle 中正常工作，但它在我的项目中不起作用，这是 WooCommerce 的结帐形式：

jQuery(document).ready(function() {
  jQuery("#my_datepicker").bind('change', function() {
    if (jQuery(this).val() != "select") {
      alert('Something is selected!');
    } else {
      alert('Nothing is selected!');
    }
  });

  jQuery("#my_datepicker").trigger('change');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name="my_datepicker" id="my_datepicker" class="select valid" data-placeholder="Please select" aria-invalid="false">
  <option value="select">Please select</option>
  <option value="11th December">11th December</option>
  <option value="12th December">12th December</option>
</select>

在我的项目中alert('Nothing is selected!'); 按预期在页面加载上工作，但更改选择选项后没有任何反应！即使我再次选择<option value="select">Please select</option>，它的相关警报也不会出现。你能指导我解决这个问题吗？

【问题讨论】：

检查控制台是否存在本地版本中的错误。另请注意，bind() 非常旧，已被弃用，很可能会在下一个版本的 jQuery 中被删除。您应该将其替换为 on()。
@RoryMcCrossan 我在控制台中没有错误。也试过 on() 但结果相同。
@freedomn-m 我已将该脚本放在页脚区域；有什么解决方案可以设置更好的优先级吗？
我建议将其更改为委托事件，以防 woocomerce 或 wordpress 正在重建 HTML。将jQuery("#my_datepicker").bind('change', function() { 更改为jQuery(document).on("change", "#my_datepicker", function() {

标签： javascript html jquery woocommerce bind

【解决方案1】：

检查我希望它可以正常工作，但如果此代码不工作，这意味着 js 错误出现在您的网站上，这就是下面的 js 代码块生成错误的原因。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
    jQuery("#my_datepicker").trigger('change');
});
jQuery(document).on('change',"#my_datepicker", function(e) {
    e.preventDefault();
    if (jQuery(this).val() !== "select") {
      alert('Something is selected!');
    } else {
      alert('Nothing is selected!');
    }
});
</script>
<select name="my_datepicker" id="my_datepicker" class="select valid" data-placeholder="Please select" aria-invalid="false">
  <option value="select">Please select</option>
  <option value="11th December">11th December</option>
  <option value="12th December">12th December</option>
</select>

【讨论】：