Dynamic button click doesn't work in Jquery

Question

I want to develop dynamic presentation content in HTML5 presentation from

http://www.script-tutorials.com/creating-an-attractive-presentation-with-html5/

This tutorial is ok for static content . But I want to write dynamic content with jquery as the following:

$(document).ready(function(){

            $.getJSON(url, function (data) {

                   for(var i in data)
                       {                             
                        output=" <button title='Next' id='nav-next' class='nav-next'>Click</button>";                      
                       }

                    $("#placeholder").append(output);
                });
 });

When click on button , I want to go next slide. But this event does not work. I want to call next function on javascript file. Please help.

I am confused at why it's in the for loop when you never use i? — Jeff Shaver, Feb 26 '13 at 02:52
Duplicate: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements :: (Use the `.on()` method: http://api.jquery.com/on/) — Roko C. Buljan, Feb 26 '13 at 02:52
You are just appending the button, yet never binding it to any specific function. — rkrdo, Feb 26 '13 at 02:54
Please look up the tutorial. Don't need to bind function . In javascript file include next function. — thinzar, Feb 26 '13 at 03:04

score 1 · Answer 1 · answered Feb 26 '13 at 03:43

1

You said "When click on button" and that is the answer use jQuery.on() method.

$('#nav-next').on('click',(function () {
     // click code.
});

and then when you created DOM with id defined in .on will have click event dynamically attached.

answered Feb 26 '13 at 03:43

Dipesh Parmar

27,090
8
61
90

Daniel Imms · Answer 2 · 2013-02-26T03:06:19.670

You're not attaching an event to the new button, this can be done using the jQuery click method.

Also some other problems:

the loop seems to be redundant, you're not actually using anything in data.
output is being defined as a global variable in your example, use var to keep it in function scope.

Code:

$(document).ready(function() {
    $.getJSON(url, function (data) {

        // use var, your output was a global variable
        var output = " <button title='Next' id='nav-next' class='nav-next'>Click</button>";                      

        $("#placeholder").append(output);

        // attach the click event to the new button
        $('#nav-next').click(function () {
            // TODO: Implement click method
        });
    });
});

Since you're not using data you can remove the call to getJSON safely currently. I assume you put it in for some reason though.

Dynamic button click doesn't work in Jquery

2 Answers2