Why isn’t my jQuery .Change being triggered?

1 Views

I was playing with this last night and this morning a bit. On my WordPress site, I added a dropdown to a page to allow a user to select a podcast subscribe method (exactly like TWiT.tv’s method).

In the page editor I have the following code.

Read More
<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>

Since it is publicly accessible, the page can be found at http://mikewills.me/podcastmike/bizdevtalk/.

However the .change() isn’t being triggered when I run it in debug. Is this a WordPress page issue or is something not quite set right?

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. You are using jQuery in noConflict mode, you should use jQuery instead of $

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

  2. Try changing it to 

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

    Or alternatively, wrap it in $(document).ready(function() { /** your code in here **/ });

  3. Description

    I have tested your code on jsFiddle and the event gets triggered.

    So i think its a conflict with another javascript library.

    You can change $ to jQuery to make sure that its get handled by jQuery.

    Sample

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

    More Information