无法获取jQuery单击事件在ajax生成的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??

Answer 1

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

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

Answer 2

try this

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

Answer 3

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