Javascript 单击ATBar按钮时更改div的CSS

当前正在尝试修复WordPress站点的问题。该网站安装了ATBar插件，这是一个可访问性插件，每个页面顶部都有一个工具栏。此工具栏与普通的Wordpress工具栏重叠，因此我在WP工具栏中添加了一些CSS以将其向下推：

 top: 40px;

因为40px是ATBar的高度。不幸的是，当ATBar关闭时（通过工具栏上的按钮），间隙留在顶部

我尝试将单击事件绑定到ATBar关闭按钮，但没有效果，可能是因为ATBar在页面加载时动态加载了JS。因此，我只尝试在窗口准备就绪时绑定事件，而不是文档，但也没有效果

该网站位于此处：，如果您访问此页面，您将看到两个栏

---

任何建议都很受欢迎，你就不能这样做吗

$('#at-lnk-atkit-unload').click(function(){ //when ATbar close btn is clicked
   $('#wpadminbar').css({ "top": "0"});
});

尝试使用

$（'#在lnk atkit unload'）。在（'click'，function（）{

我尝试将单击事件绑定到ATBar关闭按钮，但没有效果，可能是因为ATBar在pag上动态加载了JS

我认为动态加载JS没有问题，但是wordpress栏在CSS top属性中有一个！important！标记。如果您可以删除！important标记，然后执行以下操作：

document.getElementById('at-lnk-atkit-unload').addEventListener('click', function(){
    document.getElementById('wpadminbar').style.top = "1px"
});

---

这应该可以解决这个问题，回答我自己的问题

通过稍微调整他们的JS，最终解决了这个问题

我没有从他们的服务器导入JS源代码，而是复制了一个副本，并添加了@emilioicai在ATBar呈现后建议的addEventListener调用。这添加了事件侦听器和所需的功能

---

谢谢！

我认为，问题在于：ATBar在代码之后加载，所以事件侦听器没有附加

如果您不想将外来代码复制到您的服务器（这是不合适的决定，因为它不会一直工作，ATBar的API可能会演变等等），您可以使用超时

setTimeout(yourfunc,0); //if loading takes a lot of time, then
// change 0 to 50 or whatever

---

或者只使用jQuery.on函数（甚至不推荐使用的.live函数）

我的第一个想法也是，但它似乎没有任何效果。我认为这是因为ATBar是动态加载并添加到页面中的。虽然不太确定……如果你访问了插件JS，请尝试将其添加到插件JS。不幸的是，它是从他们的网站加载的。这确实是个好主意，但不幸的是，这让我：

UncaughtTypeError：无法调用null的方法“addEventListener”

——可能是因为obj在运行时不存在。好的，所以ATBar的加载时间晚于代码，对吗？您可以将其添加到回调中，以便在加载条后立即执行。我不熟悉该ATBar，但这是此类组件允许的常见模式在实例化后传递回调。不幸的是，没有太多可用的文档，我看不到任何明显的东西。不过，我会继续调查，谢谢。