javascript - 使用 Chrome 扩展中的 onClick 将按钮添加到页面的正确方法

Question

我读过有多种方法可以通过 Chrome 扩展向页面添加按钮，什么是“正确”的方法？

目前我正在这样做:

function notInterested(){
    var notInterestedbutton = $('<div style="text-align:center"><button type="button" style=" margin-top:25px" class="open-in-beamery">Not Interested</button></div>')
    var notInterestedlocation = $('#hiring-platform-promotion-region')
    notInterestedlocation.append(notInterestedbutton)
    notInterestedlocation.on("click", "button", function(){
        console.log('not interested clicked')
        console.log(conversationID)
        chrome.runtime.sendMessage({
            greeting:"notInterested",
            conversationID: conversationID 
        })
    })
}

第二个按钮:

function inmailResponse(){
    var button = $('<button type="button">Add to Response</button><br>')
    var responseLocation = $('#mailbox-main')
    responseLocation.prepend(button)
    responseLocation.on("click", "button", function(){
        console.log('inmail response clicked')
        console.log(conversationID)
        chrome.runtime.sendMessage({
            greeting:"getInmailData",
            conversationID: conversationID 
        })
    })
}

每当我单击 notInterested() 按钮时，它也会触发 inmailResponse() 按钮。为什么？

我该如何编写，以便只有responseLocation按钮被点击？

V2 仍然无法工作:

function notInterested(){
    var notInterestedbutton = $('<div style="text-align:center"><button  type="button" style=" margin-top:25px" class="open-in-beamery">Not Interested</button></div>')
    var notInterestedlocation = $('#hiring-platform-promotion-region')
    notInterestedlocation.append(notInterestedbutton)
    notInterestedbutton.on("click", "button", function(){
        console.log('not interested clicked')
        console.log(conversationID)
        chrome.runtime.sendMessage({
            greeting:"notInterested",
            conversationID: conversationID 
        })
    })
}

function inmailResponse(){
    var inMailButton = $('<button  type="button">Add to Response</button><br>')
    var responseLocation = $('#mailbox-main')
    responseLocation.prepend(inMailButton)
    inMailButton.on("click", "button", function(){
        console.log('inmail response clicked')
        console.log(conversationID)
        chrome.runtime.sendMessage({
            greeting:"getInmailData",
            conversationID: conversationID 
        })
    })
}

两个按钮都被点击

Answer 1

更改处理程序，使它们绑定(bind)到按钮而不是容器

function notInterested(){
  var notInterestedbutton = $('<div style="text-align:center"><button type="button" style=" margin-top:25px" class="open-in-beamery">Not Interested</button></div>')
  var notInterestedlocation = $('#hiring-platform-promotion-region')
notInterestedlocation.append(notInterestedbutton)
notInterestedbutton.on("click", function(){
    console.log('not interested clicked')
    console.log(conversationID)
    chrome.runtime.sendMessage({
        greeting:"notInterested",
        conversationID: conversationID 
    })
 })
}

还有第二个

function inmailResponse(){
 var button = $('<button type="button">Add to Response</button><br>')
 var responseLocation = $('#mailbox-main')
 responseLocation.prepend(button)
 button.on("click", function(){
    console.log('inmail response clicked')
    console.log(conversationID)
    chrome.runtime.sendMessage({
        greeting:"getInmailData",
        conversationID: conversationID 
    })
 })
}