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是一个旨在完成所有繁重任务的功能。

我得到的问题是“这个”不是我期待的元素。它返回使用的第一个输入，即使它已经移回到.inputBucket div。触发器总是在预期时触发，但是一旦页面加载就使用第一个输入，而不是实际更改的输入。

寻找任何方法来使所需的功能发挥作用，不知道什么是错误，知道要改变什么！这也是我实际尝试创建的一个精简版本，如果这应该可行，我将提供更多信息。

第2轮解释

因此，使用JQueryUI可拖动函数将.inputBucket中的输入拖到那里。然后这些是可排序的（.inputBucket已经应用了可排序的JQueryUI函数，输入被隐藏但是它们在div中，显然可以看到它工作）。最后一步是当单击.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

而不是这样你可以尝试function(evt){ $action(evt.target){..}}并看看会发生什么？

基于我的基本理解，jquery中的this被操纵，因此它被绑定到事件发生的对象/元素（否则它将指向窗口对象）但是因为你委派了事件你没有获得预期的元素，event.target确保你获得接收事件的元素，就像你说的那样

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

Answer 2

我不确定您的要求，但如果没有错，您可以通过向所有动态添加的输入添加公共类来实现，并且使用下面给定的代码，事件将附加所有这些元素

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

JQuery on（），包含动态创建的字段和多个选择器

2 个答案: