Question

所以，我在单击由jQuery的.html（）函数呈现的元素上的事件时遇到了麻烦。这是我正在测试的代码：

<html>
<head>
    <title>Test</title>
    <script type="text/javascript" src="static/jquery-2.0.3.min.js"></script>
</head>
<body>
    <div id="content">
        <input type="submit" name="loginButton" id="loginButtonID"/>
    </div>
    <script>
        $('#loginButtonID').click(function() {
            $('#content').html('<button name="loginButton" id="newPasswordID">New Button</button>')
        });
        $('#newPasswordID').on('click', function() {
            alert("alert");
        });
    </script>
</body>
</html>

正如您所看到的，我在一开始就使用id="loginButtonID"呈现一个按钮。我有.click()个事件，它依次为.html()创建了另一个按钮（因为.text()将只返回该按钮的HTML代码）并且id="newPasswordID"按钮我应该有另一个事件.on()（不是.click()），但该事件不起作用。所以问题是：如何使.on()事件适用于第二个按钮？

感谢。

Answer 1

问题是当您尝试挂钩事件时，{em}不存在#newPasswordID元素。因此，当你执行$("#newPasswordID")时它与任何东西都不匹配，就没有设置处理程序。

您可以在渲染该元素后执行此操作，也可以将事件挂钩到元素所在的某个容器（看起来像#content）并使用事件委派：

$("#content").on("click", "#newPasswordID", function() {
    // ...
});

因为它真的在click上挂钩了#content，但是只有当事件通过匹配#newPasswordID的元素时才触发它，#newPasswordID是否存在无关紧要当你挂钩活动时。

Answer 2

试试这个：

$('#content').html(
    $('<button />').attr('name',"loginButton")
        .attr('id', "newPasswordID")
        .click(function() {
            alert('alert');
        })
);

使用.html（）添加到页面的单击元素的问题

2 个答案: