闭包 - javascript 循环赋值问题能否使用bind解决？

Question

html代码：

<p id="t1">
  <button>btn1</button>
  <button>btn2</button>
  <button>btn3</button>
  <button>btn4</button>
  <button>btn5</button>
</p>

js代码

$(function(){
  var p = $("#t1");
  for(var i=0,tmp;i<5;i++){
    p.find("button:eq("+i+")").on("click",function(){
      alert(i);
    });
  }
});

这个问题就是每次点击按钮应该弹出0,1,2,3,4
解决办法我知道的是使用闭包，代码如下：

$(function(){
  var p = $("#t1");
  for(var i=0,tmp;i<5;i++){
    (function (b){
      p.find("button:eq("+b+")").on("click",function(){
        alert(b);
      });
    })(i)
  }
});

bind的作用是改变函数的this指向，如果不使用这种方式还有其他解决方式么？
**不要在按钮上添加其他属性的方案以及类似的修改html的解决方案？
防止别人再回答关联到html、DOM元素上，就是闭包、bind、自执行函数问题**
我上次面试面试官问过bind可以解决这样的问题么？

Answer 1

bind除了可以传入绑定对象，还可以传入调用时的参数。

var btns = document.querySelectorAll('button');
function say(idx){
    alert(idx);
}
for(var i=0;i<5;i++){
    btns[i].onclick = say.bind(btns[i], i);
}

Answer 2

面试官想要的答案应该是事件委托。

t1.addEventListener('click', e => {
    if(e.target.nodeName === 'BUTTON')
        alert(e.target.innerText)
})

Answer 3

<script>
        $(function() {
            var list = $("#t1").find('button');
            list.each(function(i, e) {
                e.onclick = function() {
                    console.log(i)
                }
            })
        });
    </script>

Answer 4

哎呀，答非所问的写了一波。

$(function(){
    $("#t1 button").bind("click",function(){
        var a=$(this).prevAll("button").length;
        alert(a);
    });
})

补2楼代码：

$(function(){
    $("#t1").get(0).addEventListener('click',function(e){
    if(e.target.nodeName === 'BUTTON')
        alert(e.target.innerText)
    })
})