jQuery表单提交事件处理程序不会被调用（Chrome扩展）

所以我试图做一个简单的扩展，它打开一个新的选项卡中的网址。问题是，我似乎无法弄清楚为什么我的函数（popup.js中的函数）在我提交表单时（按下回车键）没有运行。jQuery表单提交事件处理程序不会被调用（Chrome扩展）

这里是我的代码：

manifest.json的

{ 
    "manifest_version": 2, 

    "name": "Chromerator", 
    "description": "Vim-like functionality added to chrome", 
    "version": "1.0", 

    "permissions": [ 
     "tabs" 
    ], 

    "background": { 
    "scripts": ["jquery-2.1.1.min.js"] 
    }, 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    } 
}

popup.html

<!doctype html> 
<html> 
    <head> 
     <style type="text/css"> 
      body { 
       min-width: 300px; 
       max-width: 300px; 
      } 

      #q { 
       width: 100%; 
      } 
     </style> 
    </head> 
     <script src="popup.js"></script> 
     <form class="f"> 
      <input type="text" id="q" autofocus></input> 
     </form> 
    </body> 
</html>

popup.js

$('.f').submit(function (event) { 
    var url = "http://" + &('#q').val(); 
    chrome.tabs.create({ 'url': url }); 
    event.preventDefault(); 
});

来源

2014-11-14 Barna Bruder

几个问题：

1）你在你的代码中的错字。

&('#q').val();

应该

$('#q').val();

2）@Magnus Engdal提到，你需要DOM后准备包装你的事件处理程序：

$(function() { 
    $('.f').submit(function (event) { 
     var url = "http://" + $('#q').val(); 
     chrome.tabs.create({ 'url': url }); 
     event.preventDefault(); 
    }); 
});

3）内容脚本不在扩展的上下文中运行。你需要在你的popup中包含jquery.html

<!doctype html> 
<html> 
    <head> 
     <style type="text/css"> 
      body { 
       min-width: 300px; 
       max-width: 300px; 
      } 

      #q { 
       width: 100%; 
      } 
     </style> 
    </head> 
     <script src="jquery-2.1.1.min.js"></script> 
     <script src="popup.js"></script> 
     <form class="f"> 
      <input type="text" id="q" autofocus></input> 
     </form> 
    </body> 
</html>

gl。

来源

2014-11-14 19:59:21

它工作，欢呼！虽然仍然有些奇怪，它运行时作为扩展运行，但是当我打开popup.html在铬，它不，为什么会这样？是关于权限？ – 2014-11-16 14:07:48

检查错误控制台，很可能是在chrome.tabs.create（{'url'：url}）上抛出一个错误;因为chrome对象只在作为扩展加载时才被定义。 – 2014-11-17 14:59:13

如果这就是popup.js中的所有内容，那么您需要将它包装在$(document).ready(function() {});或$(function() {});中。这里

$(function() { 
    $('.f').submit(function (event) { 
     var url = "http://" + &('#q').val(); 
     chrome.tabs.create({ 'url': url }); 
     event.preventDefault(); 
    }); 
});

来源

2014-11-14 17:14:32

非常感谢您的回复，无论出于何种原因，它仍然不适用于我，任何猜测可能会导致什么结果？顺便说一句，这是在popup.js – 2014-11-14 17:18:09

所有在没有更多的信息很难说。你可以尝试在JSFiddle上复制你的问题，就像这个http://jsfiddle.net/2hjwr0rs/。 – 2014-11-14 17:20:23

它在JSFiddle上工作。然而，那里有区别。你在那里包括一个按钮，而在我的.html文件中没有。是一个强制按钮吗？这将是愚蠢的不是吗？ – 2014-11-14 17:24:05

jQuery表单提交事件处理程序不会被调用（Chrome扩展）

回答

相关问题