0

I am trying to teach myself jQuery and am currently goofing around with click events. As I understand it the syntax for firing a click event based on id is

$("#IDname").click(function(){ //stuff goes here})

When I try this the click event does not fire. However when I change the "#IDname" to use 'this' object the click event DID fire. I don't think I want to fire based of 'this' object and I am still playing with the code to get the handler to fire the way I expect (or until I find that I am looking at the problem all wrong).

My question is why did the event fire with 'this' but not by ID. See my sample code below:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
      .heading {
          font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
      }
    </style>
  </head>

  <body>
    <script src="jquery.js"></script>
    <script>
    $( document ).ready(function() {
        <!-- Does not fire the click event -->
        $( "#shopping_list" ).click(function(event) {
            $("#shopping_list").append("<tr>");
            $("#shopping_list").append("<td>Doe</td>");
            $("#shopping_list").append("<td>Re</td>");
            $("#shopping_list").append("<td>Mi</td>");
            $("#shopping_list").append("</tr>");
        })

        <!-- Works as expected...this adds a table row when the 'Shopping List' text is clicked -->
        $( this ).click(function(event) {
            $("#shopping_list").append("<tr>");
            $("#shopping_list").append("<td>1</td>");
            $("#shopping_list").append("<td>2</td>");
            $("#shopping_list").append("<td>3</td>");
            $("#shopping_list").append("</tr>");
        })
    });

    </script>
  </body>

  <div class="heading"><h2>Shopping List</h2>
      <div class="shopping_list">
        <table>
            <tbody>
                <form>
                    <div id="shopping_list"></div>
                </form>
            </tbody>
        </table>
      </div>
  </div>
</html>
Improve this question
1
  • Mind demoing this in a fiddle? Commented Mar 17, 2013 at 20:46

4 Answers 4

Reset to default
4

It looks like your #shopping_list div has no height, so there's no click being received.

If you modify the #shopping_list div to either contain something, or give it some dimensions via css it works. 

 <form>
   <div id="shopping_list">Content</div>
 </form>

Here's a fiddle with some dummy content added: http://jsfiddle.net/Zafw6/

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

1 Comment

Ahhh thank you for the fiddle. I am guilty of creating a document that wasn't able to handle the code that was trying to support it.
1

There are multiple issues:

  1. You are listening to the wrong element for the click event. You listen to #shopping_list, which is an empty div and therefore cannot be clicked until there is some content. I guess you want the heading to be clickable, so you need to give that an id or class and attach the click listener to that one. If that's not the case, then provide that element with some content so that it can be clicked on.

  2. this can be different depending on the context. In your case, this refers to the whole document. Which is because clicking anywhere is sufficient to trigger the event.

  3. You are adding the <tr>'s at the same level as the <td>'s. In fact, the cells should be nested in the rows.

  4. Your <body> tag should be at the end of the document, after the <div>.

To show you an example on how to do it, here is a demo:

DEMO

Improve this answer

1 Comment

As I said in the response to @Hibiscus I am definitely guilty of creating an overly minimal document to get to the "good stuff" quicker. Thank you for the detailed response.
0

This is relevant on the context you are operating in. When you call $(this) from in the document.ready function this refers to the root of the dom so instead when you call $( "#someid" ).click then use 'this' inside that callback it references the element that the callback is acting upon...

Try this:

$( "#someid" ).click(function(e) {
   $(this).append("<tr>");
   $(this).append("<td>Doe</td>");
   $(this).append("<td>Re</td>");
   $(this).append("<td>Mi</td>");
   $(this).append("</tr>");
})
Improve this answer

1 Comment

Thank you for the explanation. I had a suspicion that the globalness (that's now a word) of this was behind the problem. New thing learned.
0

Also use chaining whenever possible. There's no need for searching the node again and again it is affecting the performance. See these examples

$(document).ready(function () {
    <!-- Does not fire the click event -->
    $("#shopping_list").click(function (event) {
        $(this).append("<tr>")
            .append("<td>Doe</td>")
            .append("<td>Re</td>")
            .append("<td>Mi</td>")
            .append("</tr>");
    })

    <!-- Or you can do it like that: -->
    $(this).click(function (event) {
        $("#shopping_list")
          .append("<tr><td>1</td><td>2</td><td>2</td><td>2</td><td>3</td></tr>");
    })
});
Improve this answer

1 Comment

Good to know. I have a lot more playing to do.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.