ajax post from ajax get

Question

I'm trying to post on ajax from a ajax get. Here is my code below that I'm using:

$(window).load(function() {
    $.ajax({
        url: "/masterScreen/ajaxdealerpaid/{{$id}}", 
        type: "GET", 
        data: {},
        success: function(data) {
            document.getElementById("dealerPaid").innerHTML=data; 
        }
    });
});

And then i'm trying:

$(".pay").click(function(){
            alert('Order #'+id+' has been marked as paid for '+amountPaid+'');

    var id = $(this).attr('data-id');
    var amountPaid = $("#payAmount_"+id).val()

    $.ajax({
        url: "/masterScreen/dealermarkpaid/"+id+"/"+amountPaid, 
        type: "POST", 
        data: {},
        success: function(data) {
            alert('Order #'+id+' has been marked as paid for '+amountPaid+'');
            location.reload();
        }
    });
});

My HTML is...

<table style="width: auto;" class="table table-striped table-condensed" border="0" cellspacing="0" cellpadding="0">
            <thead class="navbar-static-top" style="display:block; margin:0px; cell-spacing:0px; left:0px;">
              <tr>
                <th class="span2">Quote ID</th>
                <th class="span4">Customer name</th>
                <th class="span4">Connection date</th>
                <th class="span4">BDM</th>
                <th class="span4">Owed</th>
                <th class="span4">Amount</th>
                <th class="span2"></th>
              </tr>
            </thead>
            <tbody id="dealerUnpaid" style="display:block; overflow:auto; max-height:400px;">

            </tbody>
            <tfoot id="dealerUnpaidtot" class="navbar-static-top" style="display:block; margin:0px; cell-spacing:0px; left:0px; font-weight: bold;">

            </tfoot>
        </table>

It displays the data from the first javascript, but I also have this code from the view it's GET from...

<td class="span4"><input type="text" placeholder="Enter Amount" class="payAmount" data=name="amount" data-id="{{$unpaid->id}}" id="payAmount_{{$unpaid->id}}"></td>

<td class="span2"><input type="button" class="btn pay" value="Pay" data-id="{{$unpaid->id}}"></td>

When I press the Pay button it doesn't do anything :/

Any help to make this work would be nice please.

Thanks guys

Answer 1

If I understand correctly, you're loading your markup (including the .pay element) using AJAX and then attempting to bind something to the .pay element's click event. Since the .pay element doesn't exist in the page at the time you're doing the binding, the binding isn't working. Change your binding from:

$('.pay').click(function(){

to

$(window).on('click', '.pay', function(){

That will attach the binding to the window, which has the effect of working even on elements that are added after the window is loaded.

Answer 2

$(".pay").click(function(){...

Works only on already create elements with class pay, it doesnt work on newly created elements by ajax call. You can use delegate function to handle newly created elements

$("body").delegate(".pay","click",function(event){

    event.preventDefault(); // prevent default handlings
    alert("Test");
    //do other code...

});