window.open 在谷歌浏览器中打开多个标签而不是一个

如何解决window.open 在谷歌浏览器中打开多个标签而不是一个

我创建了一个带有搜索按钮的动态输入字段。起初，当我单击按钮时，只打开了选项卡。但是保存后，如果我再次单击它，它会为同一网址打开多个选项卡。 选项卡的数量等于创建的动态输入字段的数量，这仅在 google chorme 中发生。

<button type="button" id='btn[]' name="btn" class='btn btn-default' ><i class="fa fa-search"></i></button>

<script>

      $(document).on('click','[id^=btn]',function(f){
      f.preventDefault()
      console.log('vendor side');
      console.log(this.id);
      window.inputid = $(this).closest("tr").find("td input").attr("id");
      console.log(window.inputid);
      var myWin = window.open("/vendorlist/","","width=500,height=500");
  });

  </script>

如何在创建动态字段后停止 window.open 以打开多个选项卡。请帮助。

解决方法

如果您再次单击，它将打开一个新选项卡。 如果您不想再收听 clicks 事件，只需使用 $(document).off 删除侦听器即可。

<script>
    let listener = (f) => {
        f.preventDefault()
        console.log('vendor side');
        console.log(this.id);
        window.inputid = $(this).closest("tr").find("td input").attr("id");
        console.log(window.inputid);
        $(document).off('click','[id^=btn]',listener);
        var myWin = window.open("/vendorlist/","","width=500,height=500");
    }
    $(document).on('click',listener);
</script>

主要问题是用户无法理解按钮为何不起作用，因此您可能需要将按钮灰显并添加信息丰富的标题。