关于事件和委托的 JQuery 在 jQuery 函数中不起作用

Question

这不适用于动态填充的元素。该网站是http://bobbygerez.0fees.net/enroll_now。如果您单击添加更多并输入数字，它将不再起作用。

            (function( $ ){
            $.fn.alphaSpace = function(e){
                var arr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ";
                var code;
                if (window.event)
                    code = e.keyCode;
                else
                    code = e.which;
                var char = keychar = String.fromCharCode(code);
                if (arr.indexOf(char) == -1){
                    return false;
                }

            }

 $('.sParent').on('keypress', '.siblings_fullname, .siblings_age',  function(e){
               return $(this).alphaSpace(e);
            });

Answer 1

问题似乎出在$('.sParent')，在您的代码中，元素.sParent 也是动态创建的。

即使使用事件委托语法，也应该在事件注册发生时将处理程序添加到 dom 中已经存在的元素。在您的情况下，我认为可以使用元素 #siblingParent。

$('#siblingParent').on('keypress', '.sParent .siblings_fullname, .sParent .siblings_age', function (e) {
    return $(this).alphaSpace(e);
});

---

另外我认为你可以简化你的 alphaSpace 方法，因为它不处理任何 dom，你可以将它开发为实用方法，也可以简化

$.alphaSpace = function (e) {
    // e.which is normalized by jQuery so no need to use e.keyCode
    var char = keychar = String.fromCharCode(e.which);
    //use a simple regex
    return /a-z\s/i.test(char)
}

然后像这样使用它

return $.alphaSpace(e);