使用 Bootstrap 禁用弹出内容中的按钮侦听器

Question

I want to submit different input data using the same pre-generated html form template (they just have different variable names as titles). On my page, I have two buttons which have basically the same popover effects. When I clicked submit (this is the button inside a .popover-content , it appears that I submit both forms even though one of them is hidden.

function handlePopover (button) {
  const id = button.attr('id');
  $(document).on('click', '#close', function(){
    botton.popover('hide');
  }
  $(document).on('click', '#submit', function(){
    if(id === 'button1') alert("button1");
    else if(id === 'button2') alert("button2");
  }
}

This is how I used this function:

const button1 = $("#button1");
const button2 = $("#button2");
handlePopover(button1);
handlePopover(button2);

It's probably because I added a listener like this $(document).on(...) . But I didn't know how to solve this problem. Can I deactivate the listener when the popover content is hidden? Thank you in advance!

Answer 1

I have figured this out. You need to add a listener to the popover button before adding a listener to the submit button.

button.on('shown.bs.popover', function() {
  // add a listener to the submit button 
  $(document).on('click', '#submit', function(){
    if(id === 'button1') alert("button1");
    else if(id === 'button2') alert("button2");
  }
}