如何在两个 html 元素上绑定事件答案

【问题标题】：How to bind an event on two html elements如何在两个 html 元素上绑定事件
【发布时间】：2012-07-16 07:51:43
【问题描述】：

我创建了一个下拉菜单。此菜单通过指向父 div 来打开。当用户离开父 div 或下拉菜单时，我想隐藏这个 div

$(function(){
$('.a').live('mouseenter',function(){
    $('#dropdown').stop(false, true).hide();

    var id = $(this).attr('id');
    $('#dropdown').css({
        position:'absolute',
        top: $(this).offset().top + $(this).height() + 'px',
        right: '115px',
        left: $(this).offset().left + 'px',
        zIndex:1000,
        width:'100px'
    });

    $('#dropdown').stop().slideDown(500);

    if($('#dropdown').mouseleave() && $('#'+id).mouseleave()){
        $('#dropdown').slideUp(500);
    }
 });
});

Live Demo

【问题讨论】：

你知道.live() is deprecated吗？你应该改用.on()（或者.delegate()，如果你坚持使用低于1.7的jQuery版本）。
通过使用on控制台上的错误是Uncaught TypeError: Object [object Object] has no method 'on'
您使用的是哪个版本的 jQuery？

标签： jquery html events javascript-events

【解决方案1】：

您可以通过在选择器中用逗号分隔多个元素来绑定它们

$('.a, .this, .that, div, form').live(....

【讨论】：

【解决方案2】：

您必须添加 mouseleave 事件并检查下拉列表，为了保持简短，请尝试this

我希望这是你想要的

【讨论】：

【解决方案3】：

按照@Dale 的建议使用多个选择器，或者对两个元素使用相同的类并使用

$(".commonClass").live(function(){

});

如果您想将同一事件绑定到更多元素，您只需将commonClass 应用于它们，而不是添加新的选择器。

【讨论】：

【解决方案4】：

试试这个演示：http://jsfiddle.net/AQweU/ 或 http://jsfiddle.net/k986c/

几件事；

使用.on 活动而不是现场直播。
使用this.id 而不是$(this).attr('id')。
不确定这种情况 if($('#dropdown').mouseleave() && $('#'+id).mouseleave()){ 请参阅下面我所做的代码

请注意问题中的演示有 Jq 1.7.2，因此使用 .on。

休息检查代码：（希望对案件有所帮助）:)

$(function(){
    $('.a,#dropdown').on('mouseenter',function(){
        $('#dropdown').stop(false, true).hide();

        var id = this.id;
        $('#dropdown').css({
            position:'absolute',
            top: $(this).offset().top + $(this).height() + 'px',
            right: '115px',
            left: $(this).offset().left + 'px',
            zIndex:1000,
            width:'100px'
        });

        $('#dropdown').stop().slideDown(500);

        $('#dropdown, #'+id).mouseleave(function(){   
            $('#dropdown').slideUp(500);

        });
    });
});

【讨论】：

通过使用on控制台上的错误是Uncaught TypeError: Object [object Object] has no method 'on'
jsfiddle.net/k986c ?试试这个@RanaMuhammadUsman 我在 chrome - alienware 上，似乎工作正常
.on() 的这种用法不等同于 .live()。你需要像$(document).on('mouseenter','a', function(){/**/}) 这样的东西。此外，如果他的 jQuery 版本早于 1.7，.on() 将无法正常工作。
@nbrooks 大声笑我完全不知道什么不起作用我正在删除我的帖子！ :)
@RanaMuhammadUsman 试试这个：jsfiddle.net/AQweU 现在似乎可以工作了:) 哈哈