Making a javascript modal off AJAX-generated content

Question

I have a page where you can search for customers through an ajax search. In the ajax file it chucks all the results from mysql with html into a php var and passes it to JS which sticks it in a div. This part works fine.

Before the ajax was put in, I used a standard html form/php/mysql search. On each row (and still) there is a button to open a modal which is coded below.

<button class="button smsModal" id="patient301" fullname="Nathan Ironsi" phone="61425819959"><i class="fa fa-mobile"></i>&nbsp;sms</button>

Now that I am using content generated from the ajax call, this button has stopped working. I have checked the html and I have it formatted the same way as before, but the javascript is not picking up the clicks.

Could someone please explain what mistake I have made? My guess is JS doesn't like pulling html that was not a part of the original page html, but I do not know how to go about fixing this (or if it is indeed possible!)

Modal script:

$(".smsModal").on('click', function(){
    $.Dialog({
        overlay: true,
        shadow: true,
        flat: true,
        draggable: false,
        icon: '',
        title: 'SMS',
        content: '',
        padding: 24,
        onShow: function(_dialog){
            var getIdFromButton = $(event.target).attr('id');
            var getFullName = $(event.target).attr('fullname');
            var getPhone = $(event.target).attr('phone');
            var content = 'CONTENT GOES HERE';
            $.Dialog.title("Send SMS to " + getPhone);
            $.Dialog.content(content);
        }
    });
});

Thank you!

I managed to fix this by simply changing this line: $(".smsModal").on('click', function(){ to $(document.body).on('click', 'button', function(){. Yay! — user3342556
– user3342556, Commented Jun 10, 2014 at 4:38

Community · Accepted Answer · 2017-05-23 12:27:25Z

0

I managed to fix this by simply changing this line: $(".smsModal").on('click', function(){ to $(document.body).on('click', 'button', function(){.

Thanks to Adding onClick event to dynamically generated buttons? for the answer!

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Jun 10, 2014 at 4:40

user3342556

134 bronze badges

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

Collectives™ on Stack Overflow

Making a javascript modal off AJAX-generated content

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related