Cant get jquery click event working on ajax generated HTML

Question

This is part of another query I have here but really stuck....

I cant get jquery clcik event to work on some ajax generated HTML.

I've read all the articles and questions/answers but she wont work for me .. all help greatly appreciated....

JS

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

$(document).ready(function(){    
    $("document").on("click", ".clickme", function() {
        alert("click!");
    });

ajax

$.ajax({

        url: 'http://www.websites.com/lol.php',

        dataType: 'jsonp',

        jsonp: 'jsoncallback',

        timeout: 5000,

        success: function(data, status){            
            $.each(data, function(i,item){    
                 var balance = '<p>'+item.itemm + ' '+ item.amount + ' '+item.status  +  ' ' + '<input value="delete "type="button" id="clickme">'
                 + '</p><hr>';
                total = total + parseInt(item.amount);

                $("#mylbl2").append(balance);

HTML

<div class="col span_1_of_3">
   <b>VISA</b>
   <span id="mylbl2"></span>
   <b>TOTAL: <span id="mylbl3"></span></b><br/><br/>
</div>

Currently all I'm trying to do is get a click event working on the delete button...once I can get this working I can move on get the id and pass to a delete function... I'm stuck on getting the click event working.

Could it just be punctuation or something silly that I'n overlooking??

Amit Joki · Accepted Answer · 2014-10-05 11:58:33Z

4

document is not a selector. So, it shouldn't be wrapped in " ". Do the following

$(document).on("click", "#clickme", function() {
    alert("click!");
});

edited Oct 5, 2014 at 11:58

answered Oct 5, 2014 at 11:48

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

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

4 Comments

Rory McCrossan Over a year ago

Also, clickme is the id of the element, not the class so the selector should be #clickme

Amit Joki Over a year ago

@RoryMcCrossan was too lazy to scroll ;) Thanks anyway

Sean F Over a year ago

Thank you...resolved...it was the # that sorted it....Now I get my life back.... thanks again all

Amit Joki Over a year ago

@SeanF glad to have helped you

Fergoso · Accepted Answer · 2014-10-05 11:58:08Z

1

try this

$(document).ready(function(){    
    $(document).on("click", "#clickme", function() {
        alert("click!");
    });
});

edited Oct 5, 2014 at 11:58

answered Oct 5, 2014 at 11:52

Fergoso

1,5803 gold badges22 silver badges45 bronze badges

1 Comment

Amit Joki Over a year ago

@SeanF it was id, # should be used as in my answer

Eladit · Accepted Answer · 2014-10-05 11:55:53Z

0

Are you trying to add a click listener to the class of the element? Cause in your code you're adding it to the CLASS while it seems like you're referring to the ID. If you are willing to add multiple items with only the id change, it might be better to do:

$(".clickme").click(function(e) 
{
    alert(e.target.id);
});

And change in your ajax call

<input value="delete "type="button" id="clickme">

to

<input value="delete "type="button" class="clickme">

answered Oct 5, 2014 at 11:55

Eladit

1781 gold badge2 silver badges9 bronze badges

Collectives™ on Stack Overflow

Cant get jquery click event working on ajax generated HTML

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related