CODEWITHSUNDEEP
jquery-selectors
Itay Banner
Itay Banner

Reputation: 43

Jquery: Can I refer to a selector not present in the default HTML?

Sorry, this is probably a noob question. Could'nt find the source of my problem, or helpful info in SO (or elsewhere!).

I'm practising my newly acquired Jquery skills (?) on a small contact list demo project, which basically includes a table and a simple form to populate it. The project includes an HTML file, a CSS stylesheet, and some Javascript and Jquery magic in a .JS file.

EDIT: Here's a jsFiddle I've created for this.

By default, when the page first loads, the table is empty and a placeholder text is shown:

<table>
    <thead>
    <tr>
        <th id="col_lastName">Last Name</th>
        <th id="col_firstName">First Name</th>
        <th id="col_email">E-Mail</th>
        <th id="col_mobile">Mobile</th>
        <th id="col_actions">Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr id="placeholder">
        <td colspan="5">No contacts yet. Feel free to add your friends!</td>
    </tr>
    </tbody>
</table>

Upon submittion of the form, using Jquery I set the placeholder to disappear and a new table row is appended:

$("tbody").append(
    "<tr><td>" +  $("#last_name").val() +
    "</td><td>" + $("#first_name").val() +
    "</td><td><a href='mailto:" + $("#email").val() + "'>" + $("#email").val() + "</a>" +
    "</td><td>" + $("#mobile").val() +
    "</td><td><p class='remove_link'>Remove</p></td></tr>");

I would like it to include a link to remove the current row, so I wrote a function that's triggered by clicking the <p class="remove_link">"Remove"</p> text that was part of the string appended upon form submittion. However I can't seem to be able to make it clickable with Jquery. I wrote this:

$(".remove_link").click(function(){
    // just for chaecking the selector is ok
    console.log("remove clicked"); 
});

But on the actual page the "Remove" isn't clickable at all.

Does it have anything to do with the fact that the class doesn't appear in the default HTML and is only declared in the appended code?

Of course, it could also mean my syntax is wrong, but I can't figure this out!

Upvotes: 3

Views: 97

Answers (2)

Variant
Variant

Reputation: 17385

Since the element you are trying to bind the event to does not exist yet when you perform the binding you need to set up a future delgate using .on()

$("table").on('click',".remove_link",function () {
      console.log("remove clicked");
});

Note that the important trick is to start the binding from an existing element (in this case the table)

I updated your fiddle here: http://jsfiddle.net/Abxzx/4/

Upvotes: 3

Itay Banner
Itay Banner

Reputation: 43

well, I think I have a lead for an answer for this. In the page dealing with The .on() method on W3Schools there's a reference (down belew) to the fact that this method can also "work for elements not yet created". From this I deduct that the simple .click() just won't do. I'll try again with .on() tomorrow and will report my findings.

Meanwhile, if there's someone here more experienced in Jquery, I'd appreciate your opinion/advice.

Upvotes: 1

Related Questions