3

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

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

编辑：这是我为此创建的 jsFiddle。

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

<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 中并且仅在附加代码中声明的事实有关吗？

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

4

2 回答 2

3

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

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

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

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

于 2013-04-25T01:40:16.517 回答
1

好吧，我想我有一个答案。在处理W3Schools.on()上的方法的页面中，有一个参考（下图）表明该方法也可以“适用于尚未创建的元素”。从中我推断出简单是行不通的。我明天再试一次，并报告我的发现。.click().on()

同时，如果这里有人在 Jquery 方面更有经验，我将不胜感激您的意见/建议。

于 2013-04-24T22:49:47.710 回答