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

Question

我创建了一个带有搜索按钮的动态输入字段。起初，当我单击按钮时，仅打开选项卡。但是在保存后，如果我再次单击它，它会为同一个 url 打开多个选项卡。 选项卡的数量等于创建的动态输入字段的数量，这仅在 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 以打开多个选项卡。请帮助。

Answer 1

如果您再次单击，它将打开一个新选项卡。 如果您不想再收听 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', '[id^=btn]', listener);
</script>

主要问题是用户无法理解按钮为什么不起作用，因此您可能需要将按钮设为灰色并添加一个信息标题。