dynamic button does not call javascript function?

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";
          });

Just wondering, can this html be inserted into adminDiv more than once? If so, you could end up having elements in your DOM with duplicate IDs. If you have logic to let this only happen once, you might as well just put the HTML on your page inside a div that you hide/show based on your logic above. — Gromer
– Gromer, Commented Aug 2, 2012 at 21:09
Thats a good point Gromer but this div will only be added once so i should not have that issue. Thanks for pointing that out. — Miguel
– Miguel, Commented Aug 2, 2012 at 21:18

Ram · Accepted Answer · 2012-08-02 21:02:57Z

5

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

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

edited Aug 2, 2012 at 21:02

answered Aug 2, 2012 at 20:57

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Miguel Over a year ago

Thank you i was so frustuated I appreciated your answer immensely. however i dont understand how can the listener be added after i do it like this? im basically adding a listener for something that does not exist yet. I guess i need to read up on .on and understand it a little better. Thank you!!!

Gromer Over a year ago

Miguel, that's what on does. It adds the listeners to any matching element, regardless of when it is added to the DOM. I'm not sure how the jQuery code does it, since I haven't browsed into the source enough.

Miguel Over a year ago

Thanks Gromer I just find the concept really kool that .on would actually know when something is added to the page and essentially adds an event listener to that object im just curious how that works. seems pretty cool i never realized you can do that. Well now i do.

vector · Accepted Answer · 2012-08-02 20:58:39Z

0

Maybe have a look at http://api.jquery.com/live/. Also, instead of hardcoding onClick in the button bind a listener to it instead.

answered Aug 2, 2012 at 20:58

vector

7,6068 gold badges56 silver badges81 bronze badges

2 Comments

Gromer Over a year ago

Just an FYI: "As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()." That's from the jQuery .live docs. To be fair, he could be using a version of jQuery before 1.7.

vector Over a year ago

fair enough, didn't think about what version is used.

Collectives™ on Stack Overflow

dynamic button does not call javascript function?

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related