Lightbox2 标题中的按钮未触发单击事件

Question

我在 Lightbox2 标题中添加了一个按钮：

<a href="link-to-img" data-lightbox="gallery" data-title="
  <div class='popup-button-container'>
    <button class='order-button'>Order now</button>
  </div>"><img src="img.jpg">
</a>

按钮是可见的，但是当我尝试创建 onclick 功能时，它不起作用：

$(document).on("click", ".order-button", function(e){
    e.preventDefault();
    console.log('Button clicked');
    $('#popup1').bPopup({
        speed: 850,
        transition: 'slideDown', 
        modalColor: '#000000',
        opacity: 0.5
    });
    return false;
});

相同的代码适用于在灯箱内容之外具有 class order-button 的任何元素。

Answer 1

<a href="link-to-img" data-lightbox="gallery" data-title="
  <div class='popup-button-container'>
    <button class='order-button'>Order now</button>
  </div>"><img src="img.jpg">
</a>

你在下面写的代码是data-title。

<div class='popup-button-container'>
        <button class='order-button'>Order now</button>
      </div>

在

之后渲染

$(document).on.

所以你应该在渲染灯箱时绑定事件，即正在渲染标题

Lightbox2 标题中的按钮未触发单击事件

Click event is not firing for button in Lightbox2 caption

javascript

jquery

lightbox2