Question

您好我正在尝试在事件触发时使用addEventlistener。但它无法正常工作。当我点击header_search按钮时它工作正常并登录控制台“点击”并打开一个窗口。在打开的窗口上有一个关闭按钮，其ID为“搜索关闭”。当我按下不起作用的按钮。即使它没有控制台日志“点击”。有人可以帮忙吗？这是浏览器问题吗？

var search = document.getElementById('header_search');
var close = document.getElementById('search-close');

console.log(search);
console.log(close);

search.addEventListener('click', function(event){
    console.log("clicked");
    event.preventDefault();
    showFullScreen();
    document.getElementById('search-top').focus();
});

close.addEventListener('click', function(event){
    event.preventDefault();
    console.log("clicked");
    searchClose();
});

function showFullScreen(){
    $('html').prepend('<div class="full-screen-search" />');
    var search_form = document.getElementById('search-header-form').innerHTML;
    $(".full-screen-search").html(search_form);
    $(".full-screen-search").fadeIn(1000);
};

function searchClose(){
    $(".full-screen-search").fadeOut(200);
    $(".full-screen-search").remove();

};

Answer 1

如果您使用的是jQuery，请不要使用addEventListener和getElementById。这种方式打败了jQuery的“更多，更少”的好处。使用.click(function(){...})或.on('click', function(){...})和$('#idname')

您正在动态添加窗口，因此关闭按钮不是您最初使用getElementById('search-close')找到的按钮。

使用附加到不变的祖先元素的jQuery 委托事件处理程序

e.g。

 $(document).on('click', '#search-close', function(){...

您不能在页面上拥有重复的ID，或者只能找到第一个ID。建议您改为使用类：

 $(document).on('click', '.search-close', function(){...

委派事件通过监听事件（例如点击）来冒泡到不变的祖先元素。 document是最好的默认，没有别的更接近。然后它在事件时应用jQuery选择器，因此在注册代码时不需要存在目标。

如果您还可以提供页面HTML，我将提供一个完整的示例，说明如何使用jQuery更好地编写代码 ：）

单击时，addEventListener不起作用

1 个答案: