It seems to me that you are having a binding problem. I came across
this in the past and found the simplest solution to the problem.
Your original code is kinda correct but there's too much of it. Your
defining a click event in doc.ready is correct as written but only
gets fired once at document loading. If dynamic content gets loaded
afterwards, those new objects will not be added to the click event
handler. You will have to rebind the new objects in order for them to
register the event.
$(document).ready(function() {
//The original click event binding will work only once!!
$("#my_div").click(function () {
do_something
});
});
*************** The new code ****************************
$(document).ready(function() {
// Convert the bind event handler to a custom function so that you can
call it whenever you need.
function mybind(){
$("#my_div").click(function () {
alert('you clicked');
});
}
//Call the function initially to create the bind
mybind();
});
Everytime you load new content that you wish to have the click events
bound to, you will have to unbind() then call your new mybind()
function like so;
$('#my_div').unbind();
mybind();
The reason for the unbind is so that if there are multiple matching
items on the page, they will trigger the click event code each time
the binding is run until and unbind is called. You can simulate this
by calling mybind(); twice in the doc.ready. When you click on
#my_div, it will show the alert twice!
Hope this clears up the confusion.
On Dec 15, 2:31 am, nachocab <nacho...@gmail.com> wrote:
> Hi everyone,
> I found the mistake, although I'm not quite sure why it works, but it
> does.
> Change this:
> __app.js___________________________________
> 5 $(document).ready(function() {
> 6 $("#my_div").click(function () {
> 7 do_something
> 8 });
> 9 });
> To this:
> 5 $(document).ready(function() {
> 6 $("#my_div").click( do_something() );
> 7 function do_something (){...};
> 8 });
>
> Thanks for the inspiration!
>
> Nacho
> On Dec 14, 7:25 pm, "Michael Geary" <m...@mg.to> wrote:
>
> > It's pretty hard to tell what might be wrong from the code snippet. Can you
> > post a link to a test page instead?
>
> > -Mike
>
> > > From: nachocab
>
> > > You're right:
> > > __test.js__________________________
> > > 1 test("bind div again", function() {
> > > 2 $("#my_div").click();
> > > 3 ok( check_if_it_worked, "working") //Here it fails!
> > > 4 });
> > > __app.js___________________________________
> > > 5 $(document).ready(function() {
> > > 6 $("#my_div").click(function () {
> > > 7 do_something
> > > 8 });
> > > 9 });
>
> > > The test fails because line 2 never calls the function in
> > > line 7. Any ideas? I'm clueless... Thanks!
>
> > > On Dec 14, 2:59 pm, "Derrick Jackson" <derrick.jackso...@gmail.com>
> > > wrote:
> > > > Nacho,
>
> > > > I am new to jQuery and may not have a lot to offer, but does the
> > > > second function actually fail or does it not run?
>
> > > > On 12/14/08, nachocab <nacho...@gmail.com> wrote:
>
> > > > > Hi,
> > > > > I have a test that passes if I run it by itself, but if I
> > > duplicate
> > > > > the code and run both of them, the second one fails. What
> > > am I doing
> > > > > wrong?
>
> > > > > __test.js___________________________________
> > > > > test("bind div", function() {
> > > > > $("#my_div").click();
> > > > > ok( check_if_it_worked, "working")
> > > > > });
>
> > > > > test("bind div again", function() {
> > > > > $("#my_div").click();
> > > > > ok( check_if_it_worked, "working") //Here it fails!
> > > > > });
>
> > > > > __app.js___________________________________
> > > > > $(document).ready(function() {
> > > > > $("#my_div").click(function () {
> > > > > do_something
> > > > > });
> > > > > });
>
> > > > > Thanks!
>
> > > > > Nacho
>
> > > > --
> > > > Sent from Gmail for mobile | mobile.google.com
