Button tag isn't being recognized as being clicked, with on('click') function?

Question

Ok so this is a little weird explanation but I till try to get through it. First off, i am unable to share a lot of code but i will make code that is similar to what is written. Ok so my problem is that I am using an iframe to make a tour on a web page, in said iframe the user should be able to click a button. Once clicked on the left side of the page should be a table of all the elements that can be clicked, in this table it would scroll to the element that is connected to said button in the iframe. Now my problem comes into play here, there are three buttons that aren't doing what i described. Two of them are cancel buttons and the other is a reset to default button(the code for them will be shown). The especially weird thing is that there are other cancel buttons and reset buttons that do work. There is code inside a js file that is a click function, where contentDocument is the body of the iframe, but the ones that dont work never enter this call.

$(this.contentDocument).on('click', function(e){ does stuff and things});

These are code from the ones that don't work!!!

<button type="button" name="btn-basic-form-cancel" id="btn-basic-form-cancel" class="button-small icon-cancel" onclick="">Cancel</button>
<button type="button" name="btn-basic-form-reset" id="btn-basic-form-reset" class="button-small icon-reset" onclick="">Reset to Default</button>
<button type="button" name="btn-advanced-form-cancel" id="btn-advanced-form-cancel" class="button-small icon-cancel" onclick="">Cancel</button>

These are code from ones that are working!!!

<button type="button" name="btn-advanced-form-reset" id="btn-advanced-form-reset" class="button-small icon-reset" onclick="">Reset</button>
<button type="button" name="btn-ziplookup-form-cancel" id="btn-ziplookup-form-cancel" class="button-small icon-cancel" onclick="">Cancel</button>
<button type="button" name="btn-columns-cancel" id="btn-columns-cancel" class="button-small icon-cancel" onclick="">Cancel</button>

Ok so if you any further questions please ask, i tried my best to explain everything but there is a chance that i did miss something. ::UPDATE I have narrowed it down to the fact that those three buttons aren't being recognized to be inside contentDocument, why would they not be if everything else around it is?

Answer 1

Give your iframe an ID, then reference it as such:

$('#myiframe').load(function(){
  var iframe = $('#myiframe').contents();
  iframe.find("button").on('click',function(e){
      alert("test");
      alert($(e.target).text());// or some such
  });
});

OR

$("#myiframeid").load( function() {
    $("#myiframeid").contents().on("click", "button", function() {
        //do something
    });
});

These SHOULD ensure it is loaded prior to attaching the event handler.