Question

I have a button wich im dynamically adding to my page like this.

if (adminInd  =='X'){

    var adminDiv = $(
        '<label id=Delegatelbl>Miscellaneous label prototyping.:</label>'+
        '</br></br>'+
         '<div style="padding-right:152px;"> '+
            '<form action="userfop.jsp" id="userForm" >'+
              '<label for="tuid">TU-ID:</label>'+
              '<input type="text" name="tuid" id="tuid" maxlength="9"/>'+
            '<button type="button" id="RoleChanger" style="cursor:pointer" class="ab_submit" onclick="validateTuid()"> Change Role </button>'+
            '</form>'+
         '</div>');

    adminDiv.insertBefore('#FormDiv');


    } 

as you can see from the button tag im trying to call a javascript function and
i just about tried everything and the function does not trigger. What im i doing wrong. I’ve been trouble shooting this for 2 hours now with no success.
here is the function I dont see what I’m doing wrong. Someone please point me in the right direction.

function validateTuid(){

    var textTuid = document.getElementById(tuid).value  

    $.ajax({  type: "POST",
          url: "dbfunctions.jsp",  
          data: {TYPE:"V", tuidval:textTuid }}).done(function( msg )
           {  
                alert("Data Saved: " + $.trim(msg));
            if (msg != null || msg != ''){userForm.submit()}
                return "N";
          });

Answer 1

You should delegate the click event, you can use on() method, try the following:

$(document).on('click', "#RoleChanger", validateTuid)