jQuery forms and a hrefs

Question

So i wanted to make some pretty buttons like http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html and everything is working fine. I wanted my forms to be able to be submitted with these sexy buttons.

So i started to use jQuery to handle all my "a" click actions.

$(document).ready(function() {
$("a").click(function() {
        alert("a");
        var a = $(this);
        var id = a.attr("id");
        switch (id) {
            case "formSubmit":
                a.parents("form:first").submit();
                return false;
});

one more question... How do i get that code above to be highlighted in javascript? or any code like formating? Sorry for the crappy spaces, the second i find out how, i will edit it.

I got distracted and forgot to ask the original question. Now with jQuery it is easy to add in new information through $.post and other information. HOW do i add in a new a href link so that the $("a").click catches it?

score 4 · Accepted Answer · answered Nov 23 '10 at 02:50

4

Use a .live() handler to handler clicks on new and future elements by replacing this:

$("a").click(function() {

With this:

$("a").live("click", function() {

This way a handler on document listens for clicks from <a> elements to bubble up...which happens for current and new elements.

answered Nov 23 '10 at 02:50

Nick Craver

623,446
136
1,297
1,155

let me give that a try and ill let you know! – ThePrimeagen Nov 23 '10 at 02:50
2 hours trying different things... no success
5 minutes on stack overflow... great success!!! – ThePrimeagen Nov 23 '10 at 02:51
1

@Michael yes, there's a performance hit because of the way .live() binds from the root of the document (essentially a huge catch all on the 'click' event, then tries to match the selector pattern). It's always better to re-attach events when you update the dom instead. Live is just a very easy way to capture an event without having to worry about dom updates. Always avoid if possible. – Ben Rowe Nov 23 '10 at 02:55
+1 for a short & sweet explanation on how `.live()` works. :) – Alex Nov 23 '10 at 02:56
@Michael - there can be a slight one initially if you have *lots* of elements (still, nothing you can notice, not even close), you *can* do `$(document.body).delegate("a", "click", function() {` to be even cheaper. – Nick Craver Nov 23 '10 at 02:56
more info http://stackoverflow.com/questions/1368223/performance-difference-between-jquerys-liveclick-fn-and-clickfn – Ben Rowe Nov 23 '10 at 02:58
2

@Ben - This is very bad false information you're giving, there are alternative methods and `.live()` doesn't necessarily attach to `document`, it *by default* attaches to `document`, there's a clear distinction there. It's not "always better" to reattach events, binding a `.live()` handler once is thousands of time cheaper (even with the selector cost per click) than binding a handler to thousands of elements individually...when you won't likely even use most of those handlers. – Nick Craver Nov 23 '10 at 02:59
Whats the difference betwixt $(document.body).delegate("a", "click", function() { and live() – ThePrimeagen Nov 23 '10 at 02:59
ahh.. i am no good at this commenting thing ;) how do i make comments with code within them? – ThePrimeagen Nov 23 '10 at 03:00
@Michael - Use backticks, the difference is the `$("a")` selector to find the elements doesn't run off the bat, since that result set is wasted it's wasteful to run it. – Nick Craver Nov 23 '10 at 03:01
@Ben - That link is *very* outdated, and so is the information, though it was never really accurate to begin with, `.live()` has always accepted a context. – Nick Craver Nov 23 '10 at 03:01
@Michael Only inline markdown allowed in comments, and only a small subset of it. `**bold**`, `\`code\``, `*italics*`, `[link text](http://www.google.com)` – Yi Jiang Nov 23 '10 at 03:06
So i have a followup question. in the `a.parents("form:first").submit();` section of code, it should call the submit action of the form. i also have code that does '$("form").submit(function() {' But it is not being caught by anything. Is there something wrong as well? I tried '$("form").live("submit", function() {' and it did not work either. – ThePrimeagen Nov 23 '10 at 03:11

score 1 · Answer 2 · answered Nov 23 '10 at 02:54

.click() only binds your handler to already existing elements. To bind to any elements, whether they exist now or will exist later, you can use .live() or .delegate(). For the sake of simplicity, we'll use .live(). The first parameter to .live() is a string, the event you wish to bind your handler to. The second parameter is your handler function.

Just change what you have to something along these lines:

$(document).ready(function() {
  $("a").live("click", function() {
  alert("a");
  var a = $(this);
  var id = a.attr("id");
  switch (id) {
   case "formSubmit":
   a.parents("form:first").submit();
  return false;
});

You should just note it as `.live()`, not `$.live()`, same for delegate, since these aren't static methods on the `jQuery` object. — Nick Craver, Nov 23 '10 at 02:57

jQuery forms and a hrefs

2 Answers2