为什么我需要在 jquery 中使用双 onClick 事件？

Question

我需要澄清以下内容。

为什么我需要指定onClick 事件2 次？ （当我这样做时，它会做我想要的）一次在 $('.modal').each(function() 函数内，一次在 $('.window-'+counter).find('input').each 函数内

如果我只使用第一个 onClick 函数，console.log 会返回屏幕上所有表单的所有输入 id。

当我只使用最后一个 onClick 函数时，console.log 不会返回任何内容。

我正在尝试从我的模式屏幕中获取单独的输入。我有以下代码

    $( document ).ready(function() { 
    $('.modal').each(function() {

//THIS PART-------------------------------------
                $(this).on('click', function() {
//----------------------------------------------

    if($( '.window-'+counter ).has('input:text').length) {
                        //console.log('first');
                        $('.window-'+counter).find('input').each(function() {

//AND THIS PART---------------------------------------------
                            $(this).on('click', function() {
//----------------------------------------------------------

                                console.log($(this).attr('id'));
                            });
                        });
                    };
               });
           });
       });

这是我的 HTML

<div class="modal window-1" id="modal-window"">
   <div class="modal-body">
      <input class="form-control" id="sku" name="sku" type="text" value="">
      <input class="form-control" id="name" name="name" type="text" value="">
   </div>
</div>

Answer 1

我测试了你的代码，发现了两件事。

1) id 为“modal-window”的 HTML div 有 1 个不必要的双引号

2) 不清楚在哪里为“计数器”变量赋值。也许这是主要问题。

否则您不必使用两次 onClick 事件。如果我从 $('.modal').each 循环中获得“计数器”变量，我对这段代码和你的 HTML 没有问题

$( document ).ready(function() {
    //$('.modal').each(function() {
    $('.modal').each(function(modalWindowIndex,modalWindow) {
        counter = modalWindowIndex + 1; //your html modal window has class window-1, but jQuery each() index starts with 0

        if($( '.window-'+counter ).has('input:text').length) {
            $('.window-'+counter).find('input').each(function() {
                $(this).on('click', function() {
                    console.log($(this).attr('id'));
                });
            });
        };
    });
});