关于事件和委托的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);