JQuery调用弹出窗口

问题描述：

我是一名学徒，从未与Javascript合作过。我的Javascript函数调用弹出窗口。这适用于第一个按钮，但不适用于以下所有内容，并且由于应用程序不断添加按钮（同一类），所以无法进行硬编码。我猜这将是与JQuery的解决方案... （“打开”）和（“openPopupUseExisting”）是两个按钮。JQuery调用弹出窗口

<script type="text/javascript"> 
    window.onload = function() { 
     document.getElementById('blackout').addEventListener('click', function() { 
      document.getElementById('popup').className = ""; 
      document.getElementById('blackout').className = ""; 
      document.getElementById('popupUseExisting').className = ""; 
     }, false); 
     document.getElementsByClassName("open")[0].addEventListener('click', function() { 
      document.getElementById('popup').className = 'visable'; 
      document.getElementById('blackout').className = 'visable'; 
     }, false); 
     document.getElementsByClassName("openPopupUseExisting")[0].addEventListener('click', function() { 
      document.getElementById('popupUseExisting').className = 'visable'; 
      document.getElementById('blackout').className = 'visable'; 
     }, false); 
     document.getElementsByClassName("close")[0].addEventListener('click', function() { 
      document.getElementById('popup').className = ""; 
      document.getElementById('blackout').className = ""; 
      document.getElementById('popupUseExisting').className = ""; 
     }, false); 
    }; 
</script>

设置点击事件的一些父元素，例如：'$（“身体” ）.on（'click'，'.open'，function（e）{....}）;'它每次都会工作。不要**在页面上的多个元素上使用相同的ID，它必须是唯一的。 – skobaljic

答

document.getElementsByClassName("close")[0]

请参阅0？

getElementsByClassName返回一个类似数组的对象。你得到了第一个项目。

使用for循环在其上循环。

对不起，这不行。 OP说“应用程序不断添加按钮（同一类）”。他的问题是动态添加的元素被解除绑定，而不仅仅是'window.onload'上已经存在**的节点列表。看看我的答案，看看你是否同意。 –

@FilipeMerker - 我正在解释为“应用程序正在开发中，并且正在添加新的部分”，而不是“在应用程序运行时动态添加新的部分”。 – Quentin

虽然这是一个好点。（： –

答

朋友，您不需要添加整个库只是为了绑定动态添加的元素。

您可以将document绑定为click事件，然后检查单击的元素是否是您想要的元素。它防止动态添加的元素被解除绑定，因为它针对的是整个文档。

document.addEventListener('click', function (e) { 
    if (e.target.classList.contains('blackout')) { 
     // your fancy magic with .blackout 
    } else if (e.target.classList.contains('open')) { 
     // your fancy magic with .open 
    } 
}, false);

如果你真的想使用jQuery，您订购的，这非常简单，使用on方法

$('.open').on('click', function(){ 
    // your fancy magic with .open 
});

JQuery调用弹出窗口

相关推荐