JQuery on() 具有动态创建的字段和多个选择器

Question

1000 个这样的问题，但我找不到我要找的东西；我会尽量准确。我对 JS/JQuery 有相当多的经验，但我对这种事情迷路了。

所以我正在动态创建输入，然后将其移入 div 以供使用。我想为这些输入附加一个事件处理程序，以便在它们发生变化时发生某些事情，这取决于知道哪个输入已被更改。 HTML 的基本形式如下所示：

<div class='inputBucket' hidden>
    <input><input> <!-- etc -->
</div>
<div class='inputBox'></div>

我使用的 JS 看起来像这样：

$('body').on(
        "input", 
        '.inputBox input[type!="radio"][type!="checkbox"]', 
        function(){
            $action($(this));
        }
);

$action 是一个函数，旨在完成所有繁重的工作。

我遇到的问题是 "this" 不是我期望的元素。它 returns 是第一个使用的输入，即使它已经移回 .inputBucket div。触发器总是在预期时触发，但在页面加载后使用第一个输入，而不是实际更改的输入。

正在寻找任何方法来实现所需的功能，但不确定哪里出了问题不知道要更改什么！这也是我实际尝试创建的精简版本，如果这可行，我会提供更多信息。

解释第2轮

因此，使用 JQueryUI 可拖动功能，.inputBucket 中的输入已被拖动到那里。然后这些是可排序的（.inputBucket 已经应用了可排序的 JQueryUI 函数，输入是隐藏的，但它们在 divs 内，这显然是可见的）。最后一步是当 .inputBucket 中的 div 之一被点击时，它会将其输入 div 发送到 .inputBox，在那里它们被更改，我得到了我的问题

还有一些... 认为这可能是不工作的另一个原因。我想创建一个函数来处理事件中的所有异常情况，如果这是正确的，它也可能对其他人有用！ 我已经更新了这个功能，现在可以使用了

$.fn.onInput = function ($selector, $actionOrMod, $action) {
    if (arguments.length == 2){
        $mod = "";
        $action = $actionOrMod;
    }else if(arguments.length == 3){
        $mod = $actionOrMod;
    }else{
        console.error('Incorrect number of arguments');
        return;
    }

    $(this).on(
        "input", 
        $selector + ' textarea' + $mod, 
        $.debounce(function(evt){$action($(evt.target))}, 250)
    );
    $(this).on(
        "input", 
        $selector + ' input[type!="radio"][type!="checkbox"]' + $mod, 
        $.debounce(function(evt){$action($(evt.target))}, 250)
    );

    $(this).on(
        "submit", 
        $selector + ' input[type!="radio"][type!="checkbox"]' + $mod, 
        function(evt){$action($(evt.target))}
    );

     $(this).on(
         "change submit", 
         $selector + ' input[type="radio"]' + $mod + ', ' + $selector + ' input[type="checkbox"]' + $mod + ', ' + $selector + ' select' + $mod, 
         function(evt){$action($(evt.target))}
    );
}

我试过简单地将 $action 作为 on 参数传递，或者编写一个小函数将 "this" 传递给 action，这两种方式都显示了这个问题。这里有什么错误吗？ $.debounce 是我知道并经常使用的 JQuery 插件，应该不是问题所在。

Answer 1

我不确定你的要求，但如果我没有错，你可以通过向所有动态添加的输入添加一个通用 class 来完成，并使用下面给出的代码，事件附加所有这些元素

$(body).on('input', '.myCommonClass', function () {
    var self=$(this);
    // so on.....
});

Answer 2

你可以试试 function(evt){ $action(evt.target){..}} 看看会发生什么吗？

根据我的基本理解，jquery 中的 this 被操纵，因此它绑定到事件发生的 object/element（否则它将指的是 window object) 但是因为你委托事件你没有得到预期的元素，event.target 确保你得到接收事件的元素，就像你说的那样

$('body').on('click', 'li', function(evt){ console.log(evt.target)}); 您将获得收到点击的精确 li 元素

JQuery on() 具有动态创建的字段和多个选择器

JQuery on() with dynamically created fields and multiple selector

javascript

jquery

jquery-events