Some times trigger event in jquery

Author: hoboy0313Created Mar 1, 2020Updated Jul 3, 2025

Issue details

Please provide issue details here.

Steps to reproduce/test case

Please provide necessary steps for reproduction of this issue, or better the reduced test case (without any external dependencies).

Please specify which version of Browsersync, node and npm you're running

Browsersync [ 2.26.7 ]
Node [ 10.16.0 ]
Npm [ 6.10.2 ]

Affected platforms

linux
windows
[ true ] OS X
freebsd
solaris
other (please specify which)

Browsersync use-case

[ true ] API
Gulp
Grunt
CLI

If CLI, please paste the entire command below

{cli command here} "dev" : "browser-sync start -—files --no-notify --files 'index.html, js/**/*.js'"

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

just use dev command.

{Browsersync init code here}

xml

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Template • TodoMVC</title>
  </style>
  <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
  <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
  <!-- CSS overrides - remove if you don't need it -->
  <link rel="stylesheet" href="css/app.css">

  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" placeholder="What needs to be done?" autofocus>
    </header>
    <!-- This section should be hidden by default and shown when there are todos -->
    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox">
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
      </ul>
    </section>
    <!-- This footer should hidden by default and shown when there are todos -->
    <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"><strong>0</strong> item left</span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a class="selected" href="#/">All</a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed">Clear completed</button>
    </footer>
  </section>
  <footer class="info">
    <p>Double-click to edit a todo</p>
    <!-- Remove the below line ↓ -->
    <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
    <!-- Change this out with your name and url ↓ -->
    <p>Created by <a href="http://todomvc.com">you</a></p>
    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
  </footer>
  <!-- Scripts here. Don't remove ↓ -->
  <script src="node_modules/todomvc-common/base.js"></script>
  <script src="js/app.js"></script>
  <script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]></script>
</body>

</html>

javascript

// app.js
$(function() {
  const ENTER = 13
  const ESC = 27

  let $todoList = $('.todo-list')
  let $input = $('.new-todo')
  let $main = $('.main')
  let $footer = $('.footer')
  let $count = $('.todo-count strong')

  // 1. enter save data
  $input.on('keydown', function(e) {
    const { keyCode, target } = e
    if (keyCode === ENTER && target.value !== '') {
      addTodoItem(target.value)
    }
  })

  // 2. delete
  $todoList.on('click', '.destroy', function() {
    const $li = $(this).parent().parent()
    $li.remove()
  })

  /**
   * @function add an item
   * @param {String} value 
   * @description
   */
  function addTodoItem (value) {
    // TODO: It should be optimized
    $main.css('display', "block")
    $footer.css('display', "block")

    $todoList.prepend(`
      <li class="">
        <div class="view">
          <input class="toggle" type="checkbox">
          <label>${value}</label>
          <button class="destroy"></button>
        </div>
        <input class="edit" value="${value}">
      </li>
    `)

    $count.text($todoList.children().length)

    $input.val('')

  }
})

This problem is the delete operation.

javascript

// 2. delete
  $todoList.on('click', '.destroy', function() {
    // here will be trigger three times.
    const $li = $(this).parent().parent()
    $li.remove()
  })

Source: BrowserSync/browser-sync

View original on GitHub View discussion on GitHub