Add on.('click') functions to newly created buttons, event firing before click

Question

First of all, I have been looking around previous answers and altering my code however none of the solutions I have previously read have worked for me. Basically I have all my questions and answers saved in a jStorage and I am trying to create a review page, where the question and the answer are posted, as well as a new button that links the user back to the page where the answered the question.

I use two functions, the createReviewPage() which creates the page for the user, showing the question and the answer. Also I have the reviewPageButton(int).

Basically I need to attach the reviewPageButton() function to newly created buttons and I have been trying to use on.('click') to find the button to the function when it is created, however the event is firing before I even click a button.

My first function (Note some of my previous attempts have been commented out):

function createReviewPage() {
    var questions = [];
    for (var index = 1; index < 5; index++) {
        questions.push($.jStorage.get("question" + index));
    }
    for (var index = 0; index < questions.length; index++) {
        console.log(questions[index].questionText);
        $('#resultDisplay').append("<h2> You answered " + questions[index].chosenAnswer + " to the question " + questions[index].questionText + "</h2>");
        $('#resultDisplay').append("<input type = 'button' id = 'qbutton" + (index + 1) + "'/>");
        //     $('.qbutton' + (index + 1)).on("click", '#qbutton' + (index+1), invokeButton(index));
        //      $('body').on('click', '.qbutton'+(index+1),reviewPageButton(index));
        $('.qbutton'+(index+1)).on('click',reviewPageButton(index));
        $('#resultDisplay').append("<br> <br> <br>");
    }
}

And my reviewPageButton()

function reviewPageButton(number) {
    var currentquestion = $.jStorage.get("question" + (number + 1));
    currentquestion.reviewed = "Yes";
    $.jStorage.set("question" + (number + 1), currentquestion);
    window.open("../src/questionpage" + (number + 1) + ".php", "_self");

}

miss the ')' in $('.qbutton' + (index + 1)).on('click,', reviewPageButton(index))); — Murad Hasan, Feb 12 '16 at 14:32
$('.qbutton' + (index + 1)).on('click', reviewPageButton(index))); missing bracket and no need of comma after click — Anoop LL, Feb 12 '16 at 14:36
Also should not 'click,' be 'click'. there seems to be an extra comma. $('.qbutton' + (index + 1).on('click,', reviewPageButton(index))); — user3509208, Feb 12 '16 at 14:37
`reviewPageButton(index)` - doesn't that look like a function call? It is. You're calling the function, and passing the return value (which is `undefined`) to `.on()`. You need to pass a function to `.on()`. — Pointy, Feb 12 '16 at 14:39

score 1 · Answer 1 · answered Feb 12 '16 at 14:40

1

reviewPageButton(index) stands for function execution, try reviewPageButton.bind(null, index) instead.

answered Feb 12 '16 at 14:40

Cezary Daniel Nowak

1,096
13
21

Anoop LL · Answer 2 · 2016-02-12T14:51:28.827

0

Missing ) and added a comma(,) after click and you are setting qbutton as ID but you are using it as class

$('#qbutton' + (index + 1)).on('click', reviewPageButton(index));

edited Feb 12 '16 at 14:51

answered Feb 12 '16 at 14:37

Anoop LL

1,548
2
21
32

This will not fix the problem. That code **calls the event handler** instead of setting it up as the event handler. – Pointy Feb 12 '16 at 14:38
I may not be awake enough, but it looks to me as you have one to many `)` at the end – Haring10 Feb 12 '16 at 14:44

score 0 · Answer 3 · answered Feb 12 '16 at 14:42

0

Could you use jQuery's .bind() method?

try replacing

$('.qbutton'+(index+1)).on('click',reviewPageButton(index));

with

$('.qbutton'+(index+1)).bind('click',reviewPageButton(index));

answered Feb 12 '16 at 14:42

Haring10

1,517
1
19
37

vol7ron · Answer 4 · 2016-02-12T21:33:43.090

I need to attach the reviewPageButton() function to newly created buttons

If you are creating dynamic buttons, you shouldn't bind events to the buttons, instead bind them to the parent and target the button. For instance:
```
$('body').on('click', '.custom-button-class', reviewPageButton.bind(null, index) );
```
When you create a button and add it to the page, create it with your custom class and when the click event is triggered somewhere in the body, it'll detect if it was an element with 'custom-button-class' and call the function. Note: you should avoid binding the even to the body, to keep performance in mind. Instead, you should bind it to your closest comment ancestor that makes sense (e.g., a div.container).

Doing this registers only one event with the browser, which saves time (improves performance) for the browser detection cycle, but also when creating dynamic elements, since each element doesn't have it's own instance of the same function.

At the very least, you need to fix your code so it is free of syntax errors and does not invoke the function, when you only need to supply a reference to the function:

function createReviewPage() {

    var questions = [];
    for (var index = 1; index < 5; index++) {
        questions.push( $.jStorage.get("question" + index) );
    }

    for (var index = 0; index < questions.length; index++) {
        console.log(questions[index].questionText);

        $('#resultDisplay').append(
           "<h2> You answered " +
            questions[index].chosenAnswer +
            " to the question " +
            questions[index].questionText + 
           "</h2>"
        );

        $('#resultDisplay').append(
           "<input type = 'button' id = 'qbutton" + 
             (index + 1) + 
           "'/>" 
        );

        // --- Problematic Line Changes ---
        // missing first ending parentheses
        // extra comma
        // function call, instead of pointer
        $('.qbutton' + (index + 1)).click(reviewPageButton.bind(null,index));

        $('#resultDisplay').append("<br> <br> <br>");    

    }
}

score 0 · Accepted Answer · answered Feb 12 '16 at 14:44

0

$('.qbutton'+(index+1)).on('click', function(){
reviewPageButton(index));
};

Don't call function there, just set handler. Maybe like this?

answered Feb 12 '16 at 14:44

Tinmar

370
4
23

Add on.('click') functions to newly created buttons, event firing before click

5 Answers5