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

Question

此图片是我的应用post detail页面 这个应用程序是关于bookaling的服务，所以用户可以发布关于booksale

功能

• userA创建一个帖子（他想要销售书籍1，书籍2，书籍3）
• 如果book2售罄userA，请点击sold out button
• 点击sold out button后，sold out将转换为click cancel，strike行将添加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)
        });
    };
});

})();

但网络浏览器控制台显示错误

cancelbutton.js:14 Uncaught TypeError: Cannot read property 'on' of undefined

我无法理解为什么js无法读取on方法 请有人帮助我

Answer 1

您可以尝试使用以下代码，而不是尝试在click循环中添加for事件侦听器：

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

这里我们为click以id开头的所有DOM元素附加"btn"处理程序。希望它会对你有所帮助。

Answer 2

它来自这里：

$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)
    });
};