CODEWITHSUNDEEP
javascriptjqueryajaxclick
Sean F
Sean F

Reputation: 31

Cant get jquery click event working on ajax generated HTML

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??

Upvotes: 0

Views: 481

Answers (3)

Amit Joki
Amit Joki

Reputation: 59232

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

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

Upvotes: 4

Fergoso
Fergoso

Reputation: 1582

try this

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

Upvotes: 1

Eladit
Eladit

Reputation: 178

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">

Upvotes: 0

Related Questions