Question

我只是在js尝试一个小实验。这是这样的;我有一个ul及低于约li，现在我附加一个事件处理程序，点击第一个li，使用如下选择器：

     var elem = $('ul li:nth-child('+ i +')');

现在我添加功能funk，如下：

var funk = function() {
    return i < 5 ? i++ : i = 0 ;
}

现在我想要发生的事情是，点击第一个li后，我希望将事件处理程序附加到下一个li，当我点击li时，点击事件应该在此之后附加到li，依此类推......

到目前为止，我已经编写了以下代码：

            var i = 0;

            $('document').ready(function(){
                str = funk();
                console.log(str);

                    var elem = $('ul li:nth-child('+ i +')');

                    elem.on('click' , function(){
                        console.log('logged');
                        funk();
                    });
            });

            var funk = function() {
                  return i < 5 ? i++ : i = 0 ;
            }

现在代码中存在一些我无法解决的明显错误，由于某种原因，funk()函数本身不起作用，因为我永远不会增加。

有人可以帮我附上动态事件处理程序吗？

FIDDLE HERE

AE-X。

Answer 1

您的代码是正确的，问题在于声明。在调用之前移动func定义。

问题在于func功能。它是一个变量，因此它最初被声明并设置为undefined，然后所有行都将被执行但func未定义，因此它将抛出错误。

Answer 2

我为此创建了一个递归解决方案。这仅在单击

时为下一个列表项添加处理程序

＆＃13;

 AWS.config = new AWS.Config();
 AWS.config.accessKeyId = "AccessKey";
 AWS.config.secretAccessKey = "SecretAccessKey";

＆＃13;

$(document).ready(function() {
  var i = 1;
  addEventHandlerForNextItem(i);

  function addEventHandlerForNextItem(num) {
    var elem = $('ul li:nth-child(' + num + ')');
    elem.on('click', function() {
      console.log('element:' + elem[0].textContent);
      alert('element:' + elem[0].textContent);
      i = i + 1;
      addEventHandlerForNextItem(i);
    });
  }
});

＆＃13;

Answer 3

不是prittest，而是我如何设法动态附加事件处理程序::

            var i = 1;

            var funk = function() {
                  return i < 5 ? ++i : i = 1 ;
            }

            changeHanderler = function(){
                str = funk();
                console.log(str);
                var elem = $('ul li:nth-child('+ i +')');
                elem.on('click.ga' , function(){
                    console.log('logged');
                    elem.off('click.ga');
                    changeHanderler();
                });

            }

            $('document').ready(function(){
                elem = $('ul li:nth-child('+ i +')');

                elem.on('click.ga' , function(){
                    changeHanderler();
                    console.log('logged');
                    elem.off('click.ga');
                });

            });

不是pritty但是有效，也过度使用on()和off() jquery函数，可能应该用于one()函数。

事件处理程序的动态附件无效

3 个答案: