在Chrome扩展程序中使用onClick在页面上添加按钮的正确方法

摩根·艾伦

我读过有多种方法可以通过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 
        })
    })
}

两个按钮都被单击

拉杜·迪亚(Radu Diță)

更改您的处理程序,使其绑定到按钮而不是容器

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 
    })
 })
}    

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Chrome扩展程序-用于在任何页面上运行js的简单内容脚本

来自分类Dev

在Chrome扩展程序中使用Facebook SDK

来自分类Dev

通过Chrome扩展程序点击页面上的元素

来自分类Dev

AngularJS在Chrome扩展程序中使用eval

来自分类Dev

自定义可扩展Listview添加按钮

来自分类Dev

扩展SAP Fiori App-在页脚中添加按钮

来自分类Dev

在Chrome扩展程序中使用细分IO

来自分类Dev

使用Selenium WebDriver自动在chrome:// extensions页面上单击按钮

来自分类Dev

在Chrome扩展程序中使用Google图表

来自分类Dev

当我在Google Chrome扩展程序中的内容脚本的帮助下将鼠标悬停在页面的每个iframe上时,该如何向其添加按钮?

来自分类Dev

如何在div onclick下添加按钮

来自分类Dev

Chrome扩展程序将按钮添加到页面上的每个图像

来自分类Dev

是否可以在Wagtail设置页面上添加按钮?

来自分类Dev

Chrome扩展程序-使用热键单击页面上的元素(按钮)

来自分类Dev

使用JavaScript动态添加按钮

来自分类Dev

使用Chrome扩展程序淡出整个页面

来自分类Dev

Chrome扩展程序-特定页面上的上下文菜单

来自分类Dev

Chrome扩展程序如何响应按钮在页面中的单击?

来自分类Dev

使用Chrome扩展程序向网页添加按钮

来自分类Dev

datagridView中的添加按钮不起作用onClick事件

来自分类Dev

如何在HTML页面中使用javascript动态添加按钮

来自分类Dev

Chrome扩展程序可将javascript添加到实时页面上

来自分类Dev

Chrome扩展程序:仅在页面上显示图像(无文本)

来自分类Dev

如何在页面上添加按字母顺序的分页

来自分类Dev

我在ajax中添加按钮时的onclick功能

来自分类Dev

如何在页面上添加按钮(在HTML上布置按钮)

来自分类Dev

在Chrome扩展程序中使用onClick

来自分类Dev

如何从创建选项卡内容添加按钮 onclick

来自分类Dev

通过 Chrome 扩展点击页面上的按钮

Related 相关文章

  1. 1

    Chrome扩展程序-用于在任何页面上运行js的简单内容脚本

  2. 2

    在Chrome扩展程序中使用Facebook SDK

  3. 3

    通过Chrome扩展程序点击页面上的元素

  4. 4

    AngularJS在Chrome扩展程序中使用eval

  5. 5

    自定义可扩展Listview添加按钮

  6. 6

    扩展SAP Fiori App-在页脚中添加按钮

  7. 7

    在Chrome扩展程序中使用细分IO

  8. 8

    使用Selenium WebDriver自动在chrome:// extensions页面上单击按钮

  9. 9

    在Chrome扩展程序中使用Google图表

  10. 10

    当我在Google Chrome扩展程序中的内容脚本的帮助下将鼠标悬停在页面的每个iframe上时,该如何向其添加按钮?

  11. 11

    如何在div onclick下添加按钮

  12. 12

    Chrome扩展程序将按钮添加到页面上的每个图像

  13. 13

    是否可以在Wagtail设置页面上添加按钮?

  14. 14

    Chrome扩展程序-使用热键单击页面上的元素(按钮)

  15. 15

    使用JavaScript动态添加按钮

  16. 16

    使用Chrome扩展程序淡出整个页面

  17. 17

    Chrome扩展程序-特定页面上的上下文菜单

  18. 18

    Chrome扩展程序如何响应按钮在页面中的单击?

  19. 19

    使用Chrome扩展程序向网页添加按钮

  20. 20

    datagridView中的添加按钮不起作用onClick事件

  21. 21

    如何在HTML页面中使用javascript动态添加按钮

  22. 22

    Chrome扩展程序可将javascript添加到实时页面上

  23. 23

    Chrome扩展程序:仅在页面上显示图像(无文本)

  24. 24

    如何在页面上添加按字母顺序的分页

  25. 25

    我在ajax中添加按钮时的onclick功能

  26. 26

    如何在页面上添加按钮(在HTML上布置按钮)

  27. 27

    在Chrome扩展程序中使用onClick

  28. 28

    如何从创建选项卡内容添加按钮 onclick

  29. 29

    通过 Chrome 扩展点击页面上的按钮

热门标签

归档