-3

我刚开始学习js，需要一点帮助：我有以下功能：

   //SET CHAT BEHAVIOR
   function chatSettings() {

        console.log('ChatSettings called')         

        function BtnAndScrollBar(texteditor) {     
            console.log('BTNAndScrollBar called');    
            const sendBtn = $('.cl.active').find('.sendBtn');
            const attachBtn = $('.cl.active').find('.attachBtn');
            console.log(sendBtn)          
        }

        function sendAndDeleteMessage(send) {
            console.log(send);
        }   

        var sendBtn = $('.cl.active').find('.sendBtn');
        sendBtn.mousedown(function () {      
            sendAndDeleteMessage(this);
        });               

        var textEditor1 = $('.cl.active').find('.chatTextarea');                  
        textEditor1.on('focus change mousedown mouseout keyup mouseup', function (){
            console.log(this);
            BtnAndScrollBar(this)
        });
   }       

      $('document').ready(function () {
          console.log('hello');
          $('.tabs').tabs();
          chatSettings();        
      });

我准备了一个js.fiddle#cl1 - 正如您在单击文本区域时从 console.log 中看到的那样，即使.cl.active随着相应的 TAB 切换，eventListener 也总是监听。

如果处于活动状态，则文本区域中的事件只是相关.cl的。我的目标是将所有三个 eventListener 包装成一个并将事件应用于活动流中的文本区域，但我尝试的所有方法都出错了......有人可以帮忙吗？#不要重复自己#DRY

4

4 回答 4

1 
$(".chatTextarea").on(
'focus change mousedown mouseout keyup mouseup', 
function (this) {
//this.id can contain the unique id
greatFunction(this);
});

这将使用 this 关键字找到的唯一 id 单独绑定事件，并将所有事件侦听器包装到一个函数中，但是当您想要处理具有相同功能的每个事件时，这会更好

请让我知道这可不可以帮你。

和平

于 2018-06-25T20:13:53.443 回答
0 
$(".cl textarea").on('focus change mousedown mouseout keyup mouseup', function () {
    greatFunction(this)
});

多田！

PS在window.onload中定义greatFunction是否有原因？

于 2018-06-25T19:38:22.290 回答
0

尝试使用 $(document).ready 函数在页面加载时加载代码。还可以使用 $('textarea #cl1').on 来获取带有 #cl1 或您要使用的任何 id 的 textarea，然后在使用 .on 后调用该函数。希望这可以帮助！让我知道它是否有效！

     $(document).ready(function () {

  function greatFunction(elem) {     
//do stuff
}    
      $('textarea').on('focus change mousedown mouseout keyup mouseup', function () {
            greatFunction(this)
        });  

}
于 2018-06-25T19:40:16.407 回答
0

首先，我将其更改onload为与 jQuery 绑定，因此您的所有逻辑都在执行 jQuery 绑定，而不是在 jQuery 和 vanilla javascript 之间来回交换。此外，执行实际绑定会删除内联绑定。

接下来，绑定已被压缩为单个委托事件侦听器。由于您在评论中回避在移动或添加活动元素后它不适用于活动元素，这反映了您正在处理动态元素。委托事件侦听器是处理此类事情的一种方法。

委托事件侦听器绑定在将更改或创建的元素的父元素上。然后它等待一个事件发生在它的一个孩子身上。当它收到它正在侦听的事件时，它会检查它源自的元素是否与侦听器的子选择器（第二个参数）匹配。如果匹配，它将处理子元素的事件。

最后，我添加了一些按钮来交换活动类，因此您可以在片段中看到事件处理程序将开始为您激活的任何元素工作，无论它以这种方式开始。

$(window).on('load', function () {
  function greatFunction (elem) {
    console.log(elem.value);
  }
  
  $(document.body).on(
      'focus change mousedown mouseout keyup mouseup',
      '.cl.active .chatTextarea',
      function () {
          greatFunction(this);
      }
  );
  
  $('.makeActive').on('click', function () {
    $('.active').removeClass('active');
    $(this).closest('div').addClass('active');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cl1" class="cl active"><textarea class="chatTextarea">aa</textarea><button class="makeActive">Make Active</button></div>
<div id="cl2" class="cl"><textarea class="chatTextarea">bb</textarea><button class="makeActive">Make Active</button></div>
<div id="cl3" class="cl"><textarea class="chatTextarea">cc</textarea><button class="makeActive">Make Active</button></div>

于 2018-06-25T20:00:25.803 回答