jQuery event on DOM elements working not properly

Question

Working on a simple calculator and a log. After getting a result after each calculation, a new record with this result appears in a log. Clicking on a circle in this log item, the circle should turn red, i.e.toggled. But the event is successful only in turn - the first circle gets red, the second doesn't, the third does and so on. Tried everything, dont't know what's happening. Please, help that's how it looks

    const mainOperationsBlock = $('.main');
    const numbersInput = $('#number-input');
    const log = $('#log');

    mainOperationsBlock.on('click', function() {
      if (numbersInput.text() === '0' && $(this).text() === '0') {
        numbersInput.text($(this).text());
      } else if (numbersInput.text().match(/[-\+\*\/]$/) && 
      $(this).text().match(/[-\+\*\/]/)) {
        numbersInput.text(numbersInput.text().substring(0, 
        numbersInput.text().length - 1) + ''+ $(this).text());
      } else if (/^0$/.test(numbersInput.text()) && 
      /[123456789]/.test($(this).text())) {
         numbersInput.text(numbersInput.text().substring(1, 
         numbersInput.text().length) + $(this).text());
      } else {
          numbersInput.text(numbersInput.text() + $(this).text());
      }
   });

    $('#erase').on('click', function() {
      numbersInput.text('0');
      numbersInput.removeClass('error');
    });

    $('#result').on('click', getResult);

    function getResult() {
      let result = eval(numbersInput.text());
      if(/[/]0/.test(numbersInput.text())) {
        numbersInput.text('ERROR');
        numbersInput.toggleClass('error');
      } else {
        $('#log').prepend(`
          <div class='log-item'>
            <span class='circle'></span>
            <p class='equation'>${numbersInput.text()}=${result} 
            </p>
            <span class='close'>&#10005;</span>
          </div>
`       );

    numbersInput.text(result);

    let logItems = $('.equation');
    logItems.each(function() {
        if(/(48)/.test($(this).text())) {
            $(this).css('text-decoration', 'underline');
        }
    });

    $('.circle').on('click', function() {
        $(this).toggleClass('red');
    });

    $('.close').on('click', function() {
      $(this).parent().remove();
    });
    }
   }

   log.scroll(function() {
     console.log(`Scroll Top: ${log.scrollTop()}`)
   });

Do not post image of your code... Please read [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). Here is [how to format](https://stackoverflow.com/editing-help) your question. — Louys Patrice Bessette, Jul 10 '21 at 16:37

score 0 · Accepted Answer · edited Jul 10 '21 at 17:43

0

The event handlers for .circle and .close are inside the getResult() function...

So every times the function runs, a new event handler is set. That makes the .toggleClass execute many times. If the function runs twice, there are two event handlers... Making the toggling run twice... So it looks like not running at all.

The solution is to move those event handlers out of the getResult() function.

Now... those elements are dynamically created... You have to use delegation.

So your handlers will be:

$(document).on('click', '.circle', function() {
  $(this).toggleClass('red');
});

$(document).on('click', '.close', function() {
  $(this).parent().remove();
});

edited Jul 10 '21 at 17:43

Valiant

88
1
10

answered Jul 10 '21 at 17:29

Louys Patrice Bessette

33,375
6
36
64

I tried that, but then the event handler is not working at all – Natalia Klimchuk Jul 10 '21 at 17:33
I edited about setting event handlers on dynamically created elements. – Louys Patrice Bessette Jul 10 '21 at 17:38
1

Thank's for the edit @ValiantJoshuaBolorunduro ;) – Louys Patrice Bessette Jul 10 '21 at 17:44

jQuery event on DOM elements working not properly

1 Answers1