Question

我有3个搜索输入和3个按钮，每个按钮都有一个带有搜索引擎的URL（在新窗口中），该搜索引擎从相应的输入中搜索字符串。

我要创建一个输入字段（填充所有其他输入），并单击一个按钮以触发所有按钮，因此单击该按钮将打开3个新标签页/窗口。

问题：点击时触发仅适用于最后一次点击事件。

我尝试使用trigger("click");或.click(); 我试图使它像这样$("#summon,.goSearch,#scholar").trigger("click");或类似$(".summon-search-submit").trigger('click'); $(".goSearch").trigger('click'); $(".google-search-submit").trigger('click');

代码

jQuery(document).ready(function($) {
    /* copy search to inputs */
    $("input#lb_search").keyup(function() {
        $mySearch = $("input#lb_search").val();
        $('.summon-search-field,#primoQueryTemp,.googleSearchInput').val($mySearch);
    });

    // Make the search
    $(document).on('click', '#start_search', function(e) {

        /* check if one of the checkboxes is checked return true/false */
        $atLeastOneIsChecked = $('input[name="checkbox_lb"]:checked').length > 0;

        if ($atLeastOneIsChecked == false && $(lb_search).val() != '') {
            $("#summon")[0].checked = true;
            $(".summon-search-submit").trigger('click');
        }

        if ($atLeastOneIsChecked == true && $(lb_search).val() != '') {

            if ($('#summon').is(':checked')) {
                $(".summon-search-submit").trigger('click');
                alert('summon');
            }
            if ($('#primo').is(':checked')) {
                $(".goSearch").trigger('click');
                alert('primo');
            }
            if ($('#scholar').is(':checked')) {
                $(".google-search-submit").trigger('click');
                alert('scholar');
            }
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- The main search input/button - the clicked one.-->
<input name="lb_search" id="lb_search" type="search"><button id="start_search">search</button><input type="checkbox" name="checkbox_lb" id="summon" value="Summon" checked=""><input type="checkbox" name="checkbox_lb" id="primo" value="Primo"><input type="checkbox" name="checkbox_lb" id="scholar" value="Google Scholar">
<!--1 search engine - triggered -->
<form class="summon-search-widget" id="blablabla" method="get" name="summonBoxFormsblablabla">
   <div class="summon-search-box"><input id="summonSearchTermsblablabla" type="text" class="summon-search-field" name="q" autocomplete="off" placeholder="blablabla""><input type="submit" value="Search" class="summon-search-submit "></div>
</form>
<!-- 2 search engine - triggered-->
<form class="primo_form" id="simple" name="searchForm" method="get" target="_blank" action="blablabla/primo_library/blablabla/dlSearch.do" enctype="application/blablabla;" onsubmit="return validateForm()"><input class="searchInput" type="text" id="primoQueryTemp" value=" " name="queryTemp" onkeypress="searchKeyPress(event);"><input class="goSearch" value="search" id="go" title="Search" alt="Search" type="button" onclick="searchPrimo()"></form>
<!-- 3 search engine - triggered-->
<form class="googleForm" target="_blank" method="get" action="https://scholar.google.co.il/scholar"><input class="googleSearchInput"  placeholder="Search Google scholar" type="text" name="q"><input class="google-search-submit" type="submit" value="Search"></form>

Answer 1

jsfiddle示例

您的html

<input name="lb_search" id="lb_search" type="search">
<button id="start_search">search</button>
<input type="checkbox" name="checkbox_lb" id="summon" value="Summon" checked="">
<input type="checkbox" name="checkbox_lb" id="primo" value="Primo">
<input type="checkbox" name="checkbox_lb" id="scholar" value="Google Scholar">

<form class="summon-search-widget" id="summon_form" target="_blank" action="https://www.facebook.com/">
  <input name="summon_search" id="summon_search" type="search" placeholder="summon">
  <input type="submit" value="Search" class="summon-search-submit">
</form>

<form class="primo-search-widget" id="primo_form" target="_blank" action="https://www.instagram.com/">
  <input name="primo_search" id="primo_search" type="search" placeholder="primo">
  <input type="submit" value="Search" class="primo-search-submit">
</form>

<form class="scholar-search-widget" id="scholar_form" target="_blank" action="https://jsfiddle.net/">
  <input name="scholar_search" id="scholar_search" type="search" placeholder="scholar">
  <input type="submit" value="Search" class="scholar-search-submit">
</form>

您的JavaScript

$(document).ready(function() {
  $("input#lb_search").keyup(function() {
    $mySearch = $("input#lb_search").val();
    $('#summon_search, #primo_search, #scholar_search').val($mySearch);
  });

  $(document).on('click', '#start_search', function(e) {
    e.preventDefault();
    if ($('#summon').is(':checked') || $('#primo').is(':checked') || $('#scholar').is(':checked')) {
      if ($('#summon').is(':checked')) {
        $("#summon_form").submit();
      }
      setTimeout(function() {
        if ($('#primo').is(':checked')) {
          $("#primo_form").submit();
        }
      }, 1000);
      setTimeout(function() {
        if ($('#scholar').is(':checked')) {
          $("#scholar_form").submit();
        }
      }, 300);
    }
  });
});

根据您的评论，我同意我们不能一个接一个地触发。我提供的答案不是最好的解决方案，但是如果您想实现它，可以使用 setTimeout 函数来实现。这只是获得所需结果的一种方法。

如何创建一个按钮，“ onClick”触发其他三个按钮上的“ click”事件

1 个答案: