单击谷歌搜索按钮时的jQuery和捕获

Question

我设置了谷歌搜索： 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>

Answer 1

如果可行，试试这些

$(()=> {  
   $(".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>