JQuery on（）帶有動態創建的字段和多個選擇器

1000這樣的問題，但我找不到我在找什麼;我會盡量準確。我對JS/JQuery有相當多的經驗，但在這類事情上我迷失了方向。JQuery on（）帶有動態創建的字段和多個選擇器

所以我動態地創建輸入，然後移動到一個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)); 
     } 
);

$行動是爲了做所有繁重的功能。

我得到的問題是「這」不是我期待的元素。它返回使用的第一個輸入，即使它已經移回到.inputBucket div。觸發器總是在預期時觸發，但在頁面加載完成後使用第一個輸入，而不是實際更改的輸入。

尋找任何方法來使所需的功能工作，不知道什麼是錯誤的知道要改變！這也是我實際嘗試創建的精簡版本，如果這應該工作，我會提供更多信息。

解釋第2輪

所以，.inputBucket內輸入已經被拖到那裏，使用jQueryUI的拖拽功能。這些都是可排序的（.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))} 
    ); 
}

我試過只是傳遞$行動的參數上，或者寫一個小函數傳遞「這個」轉化爲行動，這兩種方式顯示此問題。這裏有什麼錯誤？ $ .debounce是我知道並經常使用的JQuery插件，不應該是問題。

來源

2017-08-03 Jamie Robinson

精確li元素事件的元素，您可能需要解釋一下如何以及何時的DIV移動，從何處到何時。所以他們正在從DOM中選擇並重新部署？ – Utkanos

你能重現嗎？例如在一個片段中[mcve]？我嘗試了一個簡單的[jsfiddle]（https://jsfiddle.net/mc09qkg8/），它按預期工作。可能是因爲它是動態加載的，但我懷疑它。 –

如果您將輸入移出'.inputBox'，那麼當您使用事件委託時，事件不會觸發該輸入。如果是，那麼其他事情正在發生。 –

而不是你可以嘗試function(evt){ $action(evt.target){..}}，看看會發生什麼？

根據我的基本理解，jQuery中的this被操縱，所以它綁定到事件發生的對象/元素（否則它將指向窗口對象），但由於您委派的事件你不是獲得預期的元素，事件。目標確保您獲得接受，就如同你說的

$('body').on('click', 'li', function(evt){ console.log(evt.target)});你會得到它收到的點擊

來源

2017-08-03 11:15:59 kapreski

我不知道你的要求，但如果我沒看錯，你可以通過添加一個公共類的所有動態添加的輸入做的，下面給出的代碼，事件得到重視所有這些因素

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

來源

2017-08-03 11:14:53

JQuery on（）帶有動態創建的字段和多個選擇器

回答

相關問題