DOM元素上的jQuery事件无法正常工作[重复]

Posted 2023-05-09

【中文标题】DOM元素上的jQuery事件无法正常工作[重复]

【英文标题】：jQuery event on DOM elements working not properly [duplicate]

【发布时间】：2021-09-20 13:45:21

【问题描述】：

使用简单的计算器和日志。每次计算后得到结果后， 具有此结果的新记录出现在日志中。单击此日志项中的一个圆圈，该圆圈应变为红色，即切换。但事件只是轮流成功——第一个圆圈变红，第二个不红，第三个红，依此类推。都试过了，不知道怎么回事。请帮忙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()`)
   );        

【问题讨论】：

请勿发布您的代码图片...请阅读Minimal, Reproducible Example。这是how to format你的问题。

【参考方案1】：

.circle 和 .close 的事件处理程序位于 getResult() 函数内...

所以每次函数运行时，都会设置一个新的事件处理程序。这使得.toggleClass 执行多次。如果函数运行两次，则有两个事件处理程序...使切换运行两次...所以看起来根本没有运行。

解决方案是将这些事件处理程序移出getResult() 函数。

现在...这些元素是动态创建的...您必须使用delegation。

所以你的处理程序将是：

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

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

【讨论】：

我试过了，但是事件处理程序根本不起作用

我编辑了关于在动态创建的元素上设置事件处理程序。

天啊，非常感谢！！！！！！！爱你

感谢@ValiantJoshuaBolorunduro 的编辑；）