为什么我的 jQuery .Change 没有被触发？答案

【问题标题】：Why isn't my jQuery .Change being triggered?为什么我的 jQuery .Change 没有被触发？
【发布时间】：2012-01-05 01:16:09
【问题描述】：

我昨晚和今天早上都在玩这个。在我的 WordPress 网站上，我向页面添加了一个下拉菜单，以允许用户选择播客订阅方法（与 TWiT.tv 的方法完全一样）。

在页面编辑器中，我有以下代码。

<select id="subscribe-dropdown"><option value="0">Subscribe to Show</option>
    <option value="itms://mikewills.me/blog/category/show/bizdevtalk/feed/">iTunes</option>
    <option value="http://fusion.google.com/add?feedurl=http%3A//mikewills.me/blog/category/show/bizdevtalk/feed/">Google</option>
    <option value="winamp://Podcast/Subscribe?url=pcast://mikewills.me/blog/category/show/bizdevtalk/feed/">Winamp</option>
    <option value="zune://subscribe/?BizDevTalk=http://mikewills.me/blog/category/show/bizdevtalk/feed/">Zune</option>
    <option value="pcast://mikewills.me/blog/category/show/bizdevtalk/feed/">Other podcast clients (pcast:// compatible)</option>
    <option value="http://mikewills.me/blog/category/show/bizdevtalk/feed/">RSS</option>
</select>

<script type="text/javascript">
$(function () {
  $("#subscribe-dropdown").change(function() {
    if ($("#subscribe-dropdown option:selected").val() != "0"){
      window.open($("#subscribe-dropdown option:selected").val());
    };
  });
});
</script>

由于它是公开的，因此可以在http://mikewills.me/podcastmike/bizdevtalk/找到该页面。

但是，当我在调试中运行 .change() 时，它没有被触发。这是 WordPress 页面问题还是设置不正确？

【问题讨论】：

你在 IE 上测试吗？有时 IE 看不到 change 事件
在 Chrome 中也不起作用。
加载 jQuery - Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function 时出错。这发生在调用此代码的第 162 行。
不，我正在 Firefox 和 Chrome 中进行测试。我相信 Firefox 是最新版本。
在这里工作 -> jsfiddle.net/Ljxdv 唯一略有不同的是将代码包含在 $(document).ready() 函数中 - 试试吧

标签： jquery wordpress

【解决方案1】：

你在noConflict模式下使用jQuery，你应该使用jQuery而不是$

jQuery(function () {
  jQuery("#subscribe-dropdown").change(function() {
    if (jQuery("#subscribe-dropdown option:selected").val() != "0"){
      window.open(jQuery("#subscribe-dropdown option:selected").val());
    };
  });
});

【讨论】：

这是我第一次处理这个问题。这就是问题所在。
如果你检查mikewills.me/wp-includes/js/jquery/jquery.js?ver=1.7.1，你会看到那里有一个对jQuery.noConflict();的调用。
我想我错过了，如果我看到它，我不知道它做了什么，因为我以前从未处理过它。谢谢您的帮助。我现在可以工作了。
好问题。我真希望我能把它们都标记为答案。因为他们基本上都说同样的话。

【解决方案2】：

试试改成

jQuery(function($) {
    $("#subscribe-dropdown").change(function() {
        if ($("#subscribe-dropdown option:selected").val() != "0") {
          window.open($("#subscribe-dropdown option:selected").val());
        };
    });
});

或者，将其包装在$(document).ready(function() { /** your code in here **/ });

【讨论】：

【解决方案3】：

说明

我已经在jsFiddle 上测试了你的代码并且事件被触发了。

所以我认为它与另一个 javascript 库有冲突。

您可以将$ 更改为jQuery 以确保它被jQuery 处理。

样本

jQuery(function () {
  jQuery("#subscribe-dropdown").change(function() {
    if (jQuery("#subscribe-dropdown option:selected").val() != "0"){
      window.open(jQuery("#subscribe-dropdown option:selected").val());
    };
  });
});

说明

样本

更多信息