Click event not called by Dropdown in JavaScript u

问题:

I have two dropdowns Month and Year. Depending on the year, the list of months will change. 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>

回答1:

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.