CODEWITHSUNDEEP
jqueryalert
Rasool Vahdati
Rasool Vahdati

Reputation: 3

button in .html doesn't work in jquery

I add two buttons in a page . when I clicked on first button, Content (containing of another button) will be shown to user . problem is here : the second button is into this content that doesn't work. alert hasn't been shown to user . 

Demo : http://jsfiddle.net/k5bL7pkj/5/

Upvotes: 0

Views: 40

Answers (3)

Raheel Khan
Raheel Khan

Reputation: 111

always use all your "click, change or keyup" functions on document, it will help you in future...

$(document).on('click','#aa', function () {
    var imgUrl = $(this).data('rel');
    $("#area").html("<img src='" + imgUrl + "' alt='description' /><button id='ss'>SSSSS</button>");
});

$(document).on('click','#ss', function () {
    alert("TEST");
});

Upvotes: 0

JacobS
JacobS

Reputation: 606

You need to attach event handlers to something that exists on the page, then filter the events down to elements that may exist later.

Example:

 $('body').on('click', '#ss', function () {
    alert("TEST");
  });

Fiddle

Upvotes: 1

CMedina
CMedina

Reputation: 4222

This is because the element is created at runtime, you must add the event after creating the element.

Try this code:

$(document).ready(function(){
    $("#aa").click(function () {
        var imgUrl = $(this).data('rel');
        $("#area").html("<img src='" + imgUrl + "' alt='description' /><button id='ss'>SSSSS</button>");

        $('#ss').click(function () {
           alert("TEST");
        });

    });

});

Result: http://jsfiddle.net/k5bL7pkj/8/

Upvotes: 1

Related Questions