jquery refresh?

[eluser]Rambo Frank[/eluser]
Im working on a small project to force myself to learn jquery. Unfortunately I have run into some trouble. I am not sure if I am the one making a mistake or if jquery just isnt capable of handling the request I am making.

My code inserts rows into a table from a var I set up. It inserts the code for the new row correctly but i have a button with in this new row. The issue lies when I press this new button the page just refreshes. This only happens with rows that are inserted, does not occur with rows in the table by default. The actual code can be found here.

The main points of this error I can find is that with in that new row I'm inserting I have a

Code:

<button class='Fremove'>Remove</button>

with in it.

I also have code indicating

Code:

$(".Fremove").click(function(){
    alert("hello");
    return false;
});

No alert happens and the page simply refreshes. Keep in mind that the table is within a form tag, but the "return false" was supposed to take care of that. I have no clue whats going on and have spent much of today working on this. Id appreciate any help. Thanks in advanced.

PS: I thought since the button type is put into the row after that maybe jquery didnt recognize it since it was not there at first. Is there some sort of jquery.refresh for it?

[eluser]Thorpe Obazee[/eluser]
Seems to alert with no refresh for me.

[eluser]Rambo Frank[/eluser]
for the default one yes. If you were to add a new function and press remove on that new function then it will refresh.

[eluser]slowgary[/eluser]
Sweet! I know this one. When you add an event handler like so:

Code:

$('.Fremove').click(function(){
     //do something
});

//or like this, which is how I prefer it:
$('.Fremove').bind('click', function(){
     //do something
}):

jQuery jogs through the DOM and adds an event handler to each of the matching objects. But when you add a new object after that code was executed, the new object missed the party, so it doesn't have an event handler. Fortunately for YOU, jQuery thought of that. There's a function called 'live' that works like 'bind', except that it watched for all new elements added to the DOM, and if they match the selector they TOO get the event handler. So:

Code:

$(document).ready(function(){
     $('.Fremove').live('click', function(){
          alert('sweet!');
          //no need to return false;
     });
});

Keep at it, jQuery is the best JavaScript framework and I've tried the others so I know. The documentation is great, always dig through when you come up with a problem like this and soon you'll find yourself checking it less and less. Good luck.

[eluser]Rambo Frank[/eluser]
Wow...such a simple answer to it. I was thinking some where along the same lines but I thought of some sort of refresh function but this is the same. Thanks for your help, you're a savior :-)

[eluser]ggoforth[/eluser]
[quote author="Rambo Frank" date="1245445274"]Wow...such a simple answer to it. I was thinking some where along the same lines but I thought of some sort of refresh function but this is the same. Thanks for your help, you're a savior :-)[/quote]

Until the live function this is how you would have done it. I usually have one function that preps the initial button click, then after the rows are added I call the same function so the new buttons are allowed to have the same functionality. But yeah, live works great.

Greg