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
– Jeff Shaver, Commented Feb 26, 2013 at 2:52
Duplicate: stackoverflow.com/questions/203198/… :: (Use the .on() method: api.jquery.com/on) — Roko C. Buljan
– Roko C. Buljan, Commented Feb 26, 2013 at 2:52
You are just appending the button, yet never binding it to any specific function. — rkrdo
– rkrdo, Commented Feb 26, 2013 at 2:54
Please look up the tutorial. Don't need to bind function . In javascript file include next function. — thinzar
– thinzar, Commented Feb 26, 2013 at 3:04

Dipesh Parmar · Accepted Answer · 2013-02-26 03:43:19Z

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, 2013 at 3:43

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

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

Comments

Daniel Imms · Accepted Answer · 2013-02-26 03:06:19Z

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.

Collectives™ on Stack Overflow

Dynamic button click doesn't work in Jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related