Question

我正在尝试创建一个使用常规JavaScript（无jQuery）扩展和折叠的框。我遇到的问题是检测如何正确检测动态创建的元素或在页面加载后添加到元素的类。

以下是JS小提琴页面的示例： http://jsfiddle.net/1a518a4t/3/

正如您所看到的，它会在您折叠然后展开一次时起作用，但之后它不会再次崩溃。

JS代码：

function test() {

    var badge = document.getElementById('test');
    var close_button = document.querySelector('.test-close');

    close_button.addEventListener("click", close_box);

    function close_box() {
        badge.style.bottom = '-70px';
        close_button.classList.add("test-open");
        close_button.classList.remove("test-close");
        var open_button = document.querySelector('.test-open');
        open_button.addEventListener("click", open_box);
    }

    function open_box() {
        badge.style.bottom = '0';
        close_button.classList.remove("test-open");
        close_button.classList.add("test-close");
    }

}
window.onload = test;

我想我真的只想学习如何在JavaScript中复制jQuery的on方法。这适用于在pageload之后动态创建的元素。

Answer 1

使用单个事件侦听器。并且不要修改内联样式，只需切换类：

var badge = document.getElementById('test');
var button = document.querySelector('.button');
button.addEventListener("click", function toggle_box() {
  badge.classList.toggle('opened');
  badge.classList.toggle('closed');
});

#test {
  width: 300px;
  height: 100px;
  background-color: #ccc;
  position: fixed;
  bottom: 0;
  right: 20px;
  transition: all 0.2s;
}
#test.closed {
  bottom: -70px;
}
#test > .button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  text-indent: -9999px;
  cursor: pointer;
  background-color: #000;
}
#test.closed > .button {
  background-color: #CE312F; 
}

<div id="test" class="opened">
  <div class="button">Test</div>
</div>

Answer 2

正如评论中所提到的，这是因为创建的元素是动态添加的，因此您需要委托，因此事件处理程序可以将其绑定到创建的元素。为此，您可以查看@Ramswaroop solution以在本机JavaScript中执行此操作。虽然我认为改变类并重新绑定不同的功能甚至不是必须的。只需使用相同的<div>并具有切换功能：

var button = document.querySelector('#test div');
button.addEventListener("click", toggle_box);
...
function toggle_box() {
    if(badge.style.bottom == '-70px') {
        badge.style.bottom = '-0';
        toggleClass("test-close", "test-open");
    } else {
        badge.style.bottom = '-70px';
        toggleClass("test-open", "test-close");
    }
}

Fiddle Example

检测JavaScript

2 个答案: