Javascript 创建功能关于按钮单击，按钮由循环创建

此图像是我的应用程序

发布详细信息

页面 此应用程序是关于图书销售的服务，因此用户可以发布关于图书销售的信息

特点是

• userA

  创建一个帖子（他想要销售书籍1、书籍2、书籍3）
• 如果book2售罄

  userA

  应单击

  售罄按钮

• 单击

  售罄按钮

  时，

  售罄

  将转换

  单击取消

  ，

  删除

  行将添加book2（如book2（2222원))

所以我决定使用js+jquery

这是我的js代码

(function(){

$(document).ready(function(){
    //$book_list_num is received number of books
    //book1, book2, book3//$book_list_num = 3 
    $book_list_num = $("div").data("listNum");

    console.log($book_list_num);

    var $cancel_button = []

    for(i=1; i<= parseInt($book_list_num); i++){

        //$cancel_button[0]=#btn1,
        //$cancel_button[1]=#btn2,
        //$cancel_button[2]=#btn3
        $cancel_button[$cancel_button.length] = $("#btn"+i);


        $cancel_button[i].on('click', function(event){
           //test alert
           alert(i)
        });
    };
});

})();

我不明白为什么js不能读取方法上的

请有人帮帮我它来自这里：

$cancel_button[i].on('click', function(event){
   //test alert
   alert(i)
})

改为：

for(var i=0,l = parseInt($book_list_num);i<l; i++){

    //$cancel_button[0]=#btn1,
    //$cancel_button[1]=#btn2,
    //$cancel_button[2]=#btn3
    $cancel_button[i] = $("#btn"+(i+1));


    $cancel_button[i].on('click', function(event){
       //test alert
       alert(i)
    });
};

for（var i=0，l=parseInt（$book\u list\u num）；i在
for
循环中单击
事件侦听器，而不是尝试添加

$("[id^=btn]").on('click', function(event){
    var id = $(this).attr("id");
    var number = id.replace("btn", "");
    //test alert
    alert(number)
});

在这里，我们为其
id
以
“btn”开头的所有DOM元素附加
单击
处理程序
。希望它能对你有所帮助。
@Rayon不会有帮助的，如果exists@Rayon“
$cancel\u”按钮中的元素已经是jQuery对象。但是OP不允许数组索引以零为基础。@nnnnnn-Ooh yes！”您不能将单击事件处理程序放入for循环。”-为什么不呢？抱歉@nnnnnn。实际上我想推荐另一种方法。更新了措辞。@vijayP你解决了我可怕的问题，非常感谢！！我很高兴你的奇妙解决方案！我几乎发疯了，因为js中的
函数+循环对我来说太难了，，，，，，谢谢！你已经发现了问题，但更多解释除外抱怨你所做的细微改变会很好。（当然，修复了这个问题后，OP会有另一个问题，警报会为每个项目显示相同的值。）
$("[id^=btn]").on('click', function(event){
    var id = $(this).attr("id");
    var number = id.replace("btn", "");
    //test alert
    alert(number)
});