jquery event could not be bound

Question

show('<div class="alignLeft"><div id="ownerinfo"></div><br /><h3>Where will the document go?</h3><select id="dest"><option value="">-- select destination --</option><option>'+this.DESTINATIONS.join('</option><option>')+'</option></select><h3>Notes</h3><input type="text" id="notes" size="70" /><p><button id="regbtn">Register</button></p></div>','append',function(){
            $('#regbtn').click(function(){
                alert('ok');
            });
            alert($('#regbtn').click);
        });

The above is the code. show() is just a function that adds animation but executes third parameter after animation. It works with other functions. However, the problem is in $('#regbtn').click() -> I cannot seem to bind it. What could be the problem here?

I'm hoping that even if I don't upload the whole code you can help me figure it out. When i alert the .click, this is the output:

function (a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)}

try using: `$('#regbtn').on("click" , function(){});` instead. Works? — Ofir Baruch, Aug 26 '12 at 22:07

score 3 · Accepted Answer · answered Aug 26 '12 at 22:08

3

Since you seem to be appending the element dynamically, so please try .on even to ping click event:

http://api.jquery.com/on/

Please lemme know if I missed anything!

script

 <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

code

$('#regbtn').on('click',function(){
                alert('ok');
            });

or

   $(document).on('click','#regbtn',function(){
                    alert('ok');
                });

answered Aug 26 '12 at 22:08

Tats_innit

33,991
10
71
77

`.click(fn)` is a shorthand for `.on('click', fn)` in jQuery 1.7+ (no event delegation if there's no context selector). Your updated 2nd code may work if it's an event delegation issue though. – Fabrício Matté Aug 26 '12 at 22:09
It now says: Uncaught TypeError: Object [object Object] has no method 'on' – rationalboss Aug 26 '12 at 22:10
Most likely because you're using jQuery < 1.7 – Fabrício Matté Aug 26 '12 at 22:11
@FabrícioMatté indeed `:)` re:OP please read the above comment and if you are keen further http://stackoverflow.com/questions/11115864/whats-wrong-with-the-jquery-live-method/11115926#11115926 – Tats_innit Aug 26 '12 at 22:11
@rationalboss add this on top of your page: `` and you will unleash the awesomeness! `:)` – Tats_innit Aug 26 '12 at 22:12
Okay, I was using 1.6.4. I'm now using the latest 1.8.0. Can anyone help me understand why .click() wasn't working and the .on() suddenly worked? Thanks! :) – rationalboss Aug 26 '12 at 22:13
@rationalboss lol all good, Glad it helped! `:)` you were adding the element dynamically to the DOM on load dont know about your new element where as when you used `.on` api further read here: http://api.jquery.com/on/ delegation and beyond et. al. – Tats_innit Aug 26 '12 at 22:15
You can only bind handlers to elements currently present in the DOM, when the elements are removed their handlers also go away. With Tats' 2nd method, you're actually binding a handler to the `document` which is always there. There's a dozen of event delegation questions/day, maybe Tats has a nice link explaining it simply `=]` The [api page](http://api.jquery.com/on/) also has some throughout explanations. – Fabrício Matté Aug 26 '12 at 22:15
i see. since the #regbtn will actually be removed too when the user navigates, will it hurt if it is a .on on the $(document)? :) – rationalboss Aug 26 '12 at 22:17
go the @FabrícioMatté `:))`! re:OP the api link will makes it more clear, `:)` – Tats_innit Aug 26 '12 at 22:18
OP, yeah, if the element is removed and then re-appended, you'll have to either A. Re-attach the handler or B. Attach it to `document` (or a closer static ancestor element) with `.on` (this is usually the cleanest way). – Fabrício Matté Aug 26 '12 at 22:19
Okay, thanks! the API page is long. I'm using that .on as a "hack" to make that part of my code work. :) – rationalboss Aug 26 '12 at 22:22

jquery event could not be bound

1 Answers1