jQuery delegate with button loaded via JavaScript

Question

I've searched through stackoverflow as well as the rest of the web without finding a clear answer for what I am trying to do. I have the following HTML code:

<a id="orderPadReviewSubmitBtn" href="#" class="portlet-lightGrey-button  float-right"><span>Submit order</span></a>

which is loaded via JavaScript from a button click. I am attempting to use delegate as the jQuery on the site is 1.4.2, so no "on()" is available.

The code I am trying is this:

$("a[id=orderPadReviewSubmitBtn]").delegate("span","load", function(){
$("#orderPadReviewSubmitBtn").mousedown(function(){alert("Order Submitted");}); });

I have also tried:

$("#orderPadReviewSubmitBtn").delegate("span","load", function(){
$("#orderPadReviewSubmitBtn").mousedown(function(){alert("Order Submitted");}); })

These work if loaded once the above button is loaded, but not if I run the jQuery before the button is loaded.

My ultimate goal is to be able to run some other function once this button loads and someone clicks on it.

I have a feeling that there is something simple I am missing, and your help in finding the issues would be greatly appreciated.

Answer 1

You don't need to use the load event handler

// bind event handler to parent that exists at the time dom is ready
// it will then listen for click event from element with id=orderPadReviewSubmitBtn
$(function(){ // <-- put your code inside a document.ready function
    $('body').delegate('#orderPadReviewSubmitBtn','click',function(){
        alert("Order Submitted");
    });   
});

Replacing body with the closest static parent element

I think you don't understand how delegation works - That's why you think you need the load event. How it works is you bind it to a parent element that already exists and is static(meaning it won't change) - It will then listen for the events you specify, as they bubble up from the specific element/elements you use chose(in this case your element with id=orderPadReviewSubmitBtn)

Answer 2

You can use .live(), it isn't depreciated in 1.4, your code would end up being this:

$("a[id=orderPadReviewSubmitBtn]").live("mousedown", function() {
    alert("Order Submitted");
});​

Demo: http://jsfiddle.net/SO_AMK/d2SYE/

And, as you mentioned, if you wanted to call another function you'd use this:

$("a[id=orderPadReviewSubmitBtn]").live("mousedown", newFunc);

function newFunc() {
    alert("Order Submitted");
}​

Demo: http://jsfiddle.net/SO_AMK/YwNyP/