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"); 
});

但在实际页面上＆＃34;删除＆＃34;根本不可点击。

是否与该类没有出现在默认HTML中并且仅在附加代码中声明这一事实有什么关系？

当然，这也可能意味着我的语法错误，但我无法解决这个问题！

Answer 1

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

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

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

我在这里更新了你的小提琴：http://jsfiddle.net/Abxzx/4/

Answer 2

好吧，我认为我有一个领先的答案。在处理W3Schools上的.on()方法的页面中，有一个引用（belew），这个方法也可以“适用于尚未创建的元素”。从中我推断出简单的.click()不会这样做。我将在明天再次尝试.on()并报告我的发现。

与此同时，如果有人在Jquery有更多经验，我会很感激您的意见/建议。

Jquery：我可以引用默认HTML中没有的选择器吗？

2 个答案: