当Javascript / jQuery触发按钮点击时，

Question

我试图用jQuery“点击”搜索提交按钮。 我使用Wordpress的“即时搜索和建议”插件，当您开始在搜索字段中输入关键字时会生成建议。 如果在后端启用，则有一个选项，当您单击建议的关键字时，它将直接带您到该特定建议的特定单个帖子页面。 我已禁用该功能，因为我需要他们进入搜索结果页面，而不是直接将用户带到单个帖子页面。 在禁用该选项的情况下，当您单击建议时，所有插件都将在您单击建议时将建议的关键字（帖子标题）插入搜索字段。

场景如下：用户开始键入关键字>插件提供建议>用户在“建议”上单击>插件将单击的关键字/建议插入搜索字段>提交时单击脚本。

除了最后一部分-“提交时单击脚本”-一切正常。

我尝试了几种不同的方法。

    jQuery(".iss-result").on('click',function(){
         jQuery('#topsearchsubmit').trigger("click"); 
    }); 

还尝试了这个：

    $( ".iss-result" ).click(function() {
      $( "#topsearchform" ).submit();
    });   

.iss-result是搜索字段下下拉菜单中的一类建议。 #topsearchform是表单ID，而#topsearchsubmit是该表单的按钮ID。

我已经尝试过jQuery（document）.ready（function（$）和没有它，但无论如何都没有结果。检查时也没有任何js错误。

你能帮我吗？ 用户单击.iss-result li项目后，如何单击该搜索按钮？

谢谢

PS这是要求的搜索表单HTML

<form role="search" method="get" id="topsearchform" class="searchform group navbar-form" action="<?php echo home_url( '/' ); ?>">
 <div class="input-group header-large-search-field login-popup">
     <label for="s"><span class="offscreen sr-only"><?php echo _x( 'Search for:', 'label' ) ?></span></label>
     <input type="search" class="search-field form-control" placeholder="<?php echo esc_attr_x( 'Search', 'placeholder' ) ?>" 
     value="<?php echo get_search_query() ?>" name="s" />
      <div class="input-group-btn">
          <button id="topsearchsubmit" class="btn btn-default2 btn-top-search" type="submit"><i class="fa fa-fw fa-search"></i></button>
      </div>

     <?php /* input type="image" alt="Submit search query" src="<?php echo get_template_directory_uri(); ?>/images/search-icon.png"> */ ?> 
 </div> 
</form> 

Answer 1

我认为这对您有帮助

jQuery(".iss-result").on('click',function(e){
        e.preventDefault();
     var form=jQuery('#topsearchsubmit'); 
     $.ajax({
                type: 'POST',
                url: form.attr('action'),
                data: form.serialize(),
                dataType:'json',
                success:  function (data) {



    },
            });
});

Answer 2

由于在搜索时会创建并销毁具有.iss-result类的元素， .iss-result当您要将事件绑定到它们时，它们将不存在。 您应该使用事件委托并侦听父元素（如表单）上的单击事件。 将事件源过滤为.iss-result ，您应该能够听到这些点击。

其次，您可能不应该立即触发提交，因为插件（也在侦听这些相同的点击）需要花费时间将所选值放入input元素。 因此，您应该异步生成提交单击（使用setTimeout ）。

jQuery("#topsearchsubmit").on('click', '.iss-result', function() {
    setTimeout(function () {
        jQuery('#topsearchsubmit').click();
    }, 0);
});