jquery - 单击谷歌搜索按钮时的jQuery和捕获
问题描述
我有一个谷歌搜索设置: http ://www.merrittnet.org/search/gardening
我正在尝试捕获单击事件的按钮是:
<button class="gsc-search-button gsc-search-button-v2"><svg width="13" height="13" viewBox="0 0 13 13"><title>search</title><path d="m4.8495 7.8226c0.82666 0 1.5262-0.29146 2.0985-0.87438 0.57232-0.58292 0.86378-1.2877 0.87438-2.1144 0.010599-0.82666-0.28086-1.5262-0.87438-2.0985-0.59352-0.57232-1.293-0.86378-2.0985-0.87438-0.8055-0.010599-1.5103 0.28086-2.1144 0.87438-0.60414 0.59352-0.8956 1.293-0.87438 2.0985 0.021197 0.8055 0.31266 1.5103 0.87438 2.1144 0.56172 0.60414 1.2665 0.8956 2.1144 0.87438zm4.4695 0.2115 3.681 3.6819-1.259 1.284-3.6817-3.7 0.0019784-0.69479-0.090043-0.098846c-0.87973 0.76087-1.92 1.1413-3.1207 1.1413-1.3553 0-2.5025-0.46363-3.4417-1.3909s-1.4088-2.0686-1.4088-3.4239c0-1.3553 0.4696-2.4966 1.4088-3.4239 0.9392-0.92727 2.0864-1.3969 3.4417-1.4088 1.3553-0.011889 2.4906 0.45771 3.406 1.4088 0.9154 0.95107 1.379 2.0924 1.3909 3.4239 0 1.2126-0.38043 2.2588-1.1413 3.1385l0.098834 0.090049z"></path></svg></button>
我正在尝试使用下面的 jQuery,我没有收到任何错误,因此 .gsc-search-button 类似乎不是正确的对象。有什么想法吗?
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(".gsc-search-button").on('click', function(event){
alert(".gsc-search-button");
});
</script>
</body></html>
解决方案
试试这些,如果它有效
$(()=> {
$(".gsc-search-button").on('click', function(event){
alert(".gsc-search-button");
});
});
如果上述方法不起作用试试这个
$(()=> {
$(document).on('click', ".gsc-search-button" , function(event){
alert(".gsc-search-button");
});
});
请使用您的代码查看工作版本。
<script async src="https://cse.google.com/cse.js?cx=0e7979155b7270dbd"></script>
<meta content="Mon, 04 Feb 2019 10:40:07 -0440" name="date" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<link href="/favicon.ico" rel="shortcut icon" />
<!--link href="../css/default.min.css" media="screen" rel="stylesheet" type="text/css" /-->
<link href="search-mq.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!-- @import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
-->
</style>
<style>
div.gsc-adBlock {
display: none;
}
</style>
<!--script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11973977-13']);
_gaq.push(['_setDomainName', 'usask.ca']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script-->
<div id="header">
<div class="wrapper">
<h1 id="uofs">
<a href="/"><img alt="Gardenline" src="../images/usask.png" height=40 width=40 /></a> <span id="site-name">Search</span></h1>
<!-- search form -->
<div id="search-options">
<div>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults" linkTarget="_blank"></div>
</div>
<span id="clear-form" onclick="clearSearch();" style="display:none;"></span>
</div>
<noscript>
<p>
This page requires javascript. Please enable javascript, or use our
<a href="http://www.google.com/cse/home?cx=0e7979155b7270dbd">Google Gardenline search</a>
instead.
</p>
</noscript>
</div>
</div>
<ul id="m-nav" style="display:none;">
<li><a class="active" href="#web" onclick="showResultsTab(this,'web'); return false;"><span class="icon web" ></span>Web</a></li>
<li><a href="#map" onclick="showResultsTab(this,'map'); return false;"><span class="icon map" ></span>Map</a></li>
<li><a href="#people" onclick="showResultsTab(this,'people'); return false;"><span class="icon people" ></span>People</a></li>
</ul>
<div id="content-and-context" style="display:none;">
<div class="wrapper">
<div id="context">
<div id="people">
<ul id="m-nav-people" style="display:none;">
<li class="active" onclick="showPeopleTab(this,'phone');"><span class="icon phone"></span>Phone directory</li>
<li onclick="showPeopleTab(this,'email');"><span class="icon email"></span>Email directory</li>
</ul>
<div id="people_results"></div>
</div>
</div>
<div id="content">
<div class="hide" id="map">
<h2>Map</h2>
<div id="map_canvas">
<div id="map_result"></div>
</div>
<div id="map_list"></div>
</div>
<div id="web">
<h2>Web</h2>
<input id="hidden-input" style="display:none" />
<div id="results" style="width: 90%;">
<script>
(function() {
var cx = '0e7979155b7270dbd';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div style='display:none;'>
<gcse:searchbox enableHistory='true'></gcse:searchbox>
</div>
<gcse:searchresults webSearchQueryAddition=' -filetype:pdf -filetype:doc -filetype:gz -filetype:xml -filetype:ps -filetype:Z' linkTarget='_self'></gcse:searchresults>
</div>
</div>
</div>
</div>
</div>
<div id="search-footer" style="display:none;">
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(() => {
$(document).on('click', ".gsc-search-button", function(event) {
alert(".gsc-search-button");
});
});
</script>
推荐阅读
- flutter - 如何在颤动中减小应用栏的大小
- c - 使用随机函数生成 10x10 矩阵:如何循环新的一组数字、列和行的总和
- angular - NG2-Charts 仅在刷新页面后显示
- haskell - 为什么类型类覆盖条件在 Haskell 而不是 PureScript 中失败
- lua - Lua:如何从数组中获取随机元素?
- c# - 在 C#/.Net Core 中使用给定比特率通过 UDP 多播流式传输 MPEG TS 文件
- devops - Prometheus 警报重新标记以应用后备标签
- javascript - 如何在现有 Laravel 项目中将 Guess.js 添加到 Vue.js
- azure - Azure Devops:在 Devops 管道任务中通过 Azure CLI 进行模型注册和打包
- python - 如何获得 DF 的单个值