使用 JQuery 的 JavaScript 中的下拉菜单未调用单击事件

Posted 2023-05-09

【中文标题】使用 JQuery 的 JavaScript 中的下拉菜单未调用单击事件

【英文标题】：Click event not called by Dropdown in JavaScript using JQuery

【发布时间】：2013-07-02 16:02:16

【问题描述】：

我有两个下拉菜单月份和年份。根据年份，月份列表会发生变化。 这工作正常，但由于某种原因，我的“跨度字段”没有得到更新。问题是当用户选择一个月时，点击事件没有被调用。 注意：这一年完美无缺。

隐藏下拉 div

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

根据下拉年份值显示列表的逻辑

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

显示月份或年份的列表

$("#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
);

用户选择他想要的值。 几个月不工作

$("#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();
);

月份下拉菜单

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

【问题讨论】：

也许我错过了 s/t，但我看不出您是如何检测到您的选择标签上的点击事件的。无论如何，这是错误的事件——使用 jQuery .change() 事件来检测对<Select> 标签的更改：$('#mySelect').change(function() //do your stuff );

不应该$('#month div').html(UpdateMonths); 是$('#month div').html(UpdateMonths()); 吗？如果您使用完整代码发布 jsFiddle 或其他内容会有所帮助

显示下拉菜单的 HTML。它们是<select> 还是一些使用 span 构建的自定义下拉菜单？

嗨@MrCode，不，我使用的是 div，p 在里面。看我的代码

尝试将选择器更改为$("#month, #year").click

【参考方案1】：

选择器应该是：

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

这样做的原因是因为您想检测对#month 和#year div 中任意位置的点击。通过在原始代码中定位 span，您只会在 span 本身上获得 click 事件，默认情况下它是一个内联元素，因此它不会填充 100% 的宽度。