jquery-selectors - 查询 : Can I refer to a selector not present in the default HTML?

Question

抱歉，这可能是一个菜鸟问题。在 SO(或其他地方!)中找不到问题的根源或有用的信息。

我正在一个小型联系人列表演示项目中练习我新获得的 Jquery 技能(？)，该项目基本上包括一个表和一个用于填充它的简单表单。该项目包括一个 HTML 文件、一个 CSS 样式表以及 .JS 文件中的一些 Javascript 和 Jquery 魔法。

编辑:这是一个jsFiddle I've created for this .

默认情况下，当页面首次加载时，表格为空并显示占位符文本:

<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>

在提交表单后，我使用 Jquery 将占位符设置为消失并附加了一个新的表格行:

$("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>");

我希望它包含一个链接以删除当前行，因此我编写了一个通过单击 <p class="remove_link">"Remove"</p> 触发的函数作为提交表单时附加的字符串的一部分的文本。但是我似乎无法使用 Jquery 使其可点击。我写了这个:

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

但在实际页面上，“删除”根本不可点击。

这是否与该类未出现在默认 HTML 中且仅在附加代码中声明的事实有关？

当然，这也可能意味着我的语法错误，但我想不通!

Answer 1

由于当您执行绑定(bind)时您尝试绑定(bind)事件的元素尚不存在，因此您需要使用 .on()

设置 future 的委托(delegate)

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

请注意，重要的技巧是从现有元素(在本例中为表格)开始绑定(bind)

我在这里更新了你的 fiddle :http://jsfiddle.net/Abxzx/4/