Click event not called by Dropdown in JavaScript using JQuery

Question

I have two dropdowns Month and Year. Depending on the year, the list of months will change. enter image description here This works fine, but for some reason my "span field" is not getting updated. The problem is that the click event is not getting called, when the user choose for a month. Note: The year works perfect.

Hide the dropdown div

function Dropdown (element) {
    $("#month div, #year div").hide(); // hide all dropdowns
    if (element) $("#"+element+" div").toggle(); // show dropdown of specified element
}

Logic to show the list depending on the dropdown year value

function UpdateMonths(){
var temp = "";
    if (parseInt(Get.Year()) <= 2012){
        temp = "<p>Month1</p>"; 
    }else{
        temp = "<p>Month9</p>"; 
    }
    return temp;
}

Display a list of months or years

$("#month span, #year span").click(function(event) {

    $("#month div").html(UpdateMonths()); // IMPORTANT Show the right list of months

    event.stopPropagation();
    if (!$(this).hasClass('disabled')) { // only open downdown when not disabled
        Dropdown($(this).parent().attr("id"));
    } else Dropdown(); // hide all dropdown menues
});

The user choose the value he wants. Not working for months

$("#location div p, #month div p, #year div p").click(function() {

    var value = $(this).text(); // grab new location name/month/year.
    $(this).parent().parent().children("span").text(value); // update selected location name/month/year.
    RequestToServer();
});

Month dropdown

<div id="month">
    <span class="input">Januar</span>
    <div class=".dropdown">
    <p></p>
</div>
</div>

Maybe I'm missing s/t but I don't see how you are detecting the click event on your select tags. Regardless, it's the wrong event -- use the jQuery .change() event to detect changes to <Select> tags: $('#mySelect').change(function() { //do your stuff }); — cssyphus
Shouldn't $('#month div').html(UpdateMonths); be $('#month div').html(UpdateMonths());? And it'd help if you posted a jsFiddle or something with your full code — Zach Saucier
Show the HTML for the dropdowns. Are they <select>'s or are they some custom dropdown built with spans? — MrCode

MrCode MrCode · Accepted Answer · 2013-07-05T06:41:43

The selector should be:

$("#month, #year").click(function() {

The reason for this is because you want to detect a click on anywhere within the #month and #year divs. By targeting the spans in your original code, you would only get the click event on the span itself, which by default is an inline element and so it doesn't fill the 100% width.

Click event not called by Dropdown in JavaScript using JQuery

1 Answers