create function about buttons click, buttons created by loop

Question

this image is my app post detail page this app is service about booksaling so user can post about booksale

the feature is

userA create a post (he want sale book1, book2, book3)
if book2 was sold out userA should click sold out button
when sold out button clicked, sold out will converted click cancel and strike line will added book2 (like ~~book2(2222원)~~)

so i decide using js+ jquery

here's my js code

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

})();

but web browser console show error

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

I can not understand why js can't read onmethod please somebody help me

@Rayon - the elements in the $cancel_button array are already jQuery objects. But OP hasn't allowed for array indices being zero-based. — nnnnnn
– nnnnnn, Commented Aug 18, 2016 at 6:47

vijayP · Accepted Answer · 2016-08-18 06:49:04Z

1

Instead of trying adding click event listener in for loop can you please try following code:

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

Here we are attaching click handler for all the DOM elements whose id starts with "btn". Hope it will help you a bit.

edited Aug 18, 2016 at 6:49

answered Aug 18, 2016 at 6:45

vijayP

11.5k5 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nnnnnn Over a year ago

"You can not put your click event handler in for loop." - Why not?

vijayP Over a year ago

sorry @nnnnnn. Actually i wanted to recommend another way of doing it. Updated the wording.

Jade Han Over a year ago

@vijayP YOU SOLVED MY TERRIBLE PROBLEM THANK YOU VERY MUCH!! I'm so happy about your fantasic solution! I was almost crazy because function + loop in js is so hard to me,,, thank you!

cske · Accepted Answer · 2016-08-18 06:39:23Z

0

It comes from here:

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

Change to:

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

answered Aug 18, 2016 at 6:39

cske

2,2334 gold badges27 silver badges24 bronze badges

1 Comment

nnnnnn Over a year ago

You've spotted the problem, but more explanation explaining the subtle changes you've made would be nice. (Of course, having fixed this the OP is about to have another problem, with the alert displaying the same value for every item.)

Collectives™ on Stack Overflow

create function about buttons click, buttons created by loop

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related