javascript - jQuery 点击从未被调用

Question

我有一个简单的复选框:

<div class="checkbox_square">
    <input id="check_profile_password_show" type="checkbox" value=""></input>
    <label for="check_profile_password_show"></label>
    <span class="span-small" th:text="#{label.password_show}"></span>
</div>

如果您单击该复选框，我想更改密码输入的输入类型:

/**
 * 
 */
$(document).ready(function() {
    alert("ready");

    /**
     * 
     */
    $("#check_profile_password_show").click(function() {
        alert("click");

        if ($("#profile_password_input").attr("type") == "password") {
            $("#profile_password_input").attr("type", "text");
        } else {
            $("#profile_password_input").attr("type", "password");
        }

        if ($("#profile_password_input_new").attr("type") == "password") {
            $("#profile_password_input_new").attr("type", "text");
        } else {
            $("#profile_password_input_new").attr("type", "password");
        }

        if ($("#profile_password_input_repeat").attr("type") == "password") {
            $("#profile_password_input_repeat").attr("type", "text");
        } else {
            $("#profile_password_input_repeat").attr("type", "password");
        }
    });
});

调用“就绪”警报，但从未调用单击警报，因此我的输入复选框的单击功能不会被覆盖。我包含了正确的 javascript 文件(就绪警报有效)，并且我在另一个 javascript 文件中也有类似的机制:

/**
 * 
 */
$(document).ready(function() {
    /**
     * 
     */
    $("#check_login_password_show").click(function() {
        if ($("#login_password_input").attr("type") == "password") {
            $("#login_password_input").attr("type", "text");
        } else {
            $("#login_password_input").attr("type", "password");
        }
    });
});

运行完美。所以这是相同的代码。一个在工作，一个不工作。你能帮我找出问题所在吗？

Answer 1

如果创建点击处理程序时目标元素不存在，那么它将不会像这样工作。

让它发挥作用的另一种方法是定位文档。

$(document).on("click", "#check_profile_password_show", function(){
    alert("poop");
});