[JQUERY] 여러 요소에 대한 jQuery를 같은 클릭 이벤트

여러 요소에 대한 jQuery를 같은 클릭 이벤트

해결법

1. ---

   1.

   $('.class1, .class2').on('click', some_function);
   

   또는:

   $('.class1').add('.class2').on('click', some_function);
   

   이것은 또한 기존 개체와 함께 작동합니다 :

   const $class1 = $('.class1');
   const $class2 = $('.class2');
   $class1.add($class2).on('click', some_function);
   

2. ---

   2.나는 일반적으로 클릭 대신에 사용합니다. 그것은 나 특정 기능에 더 많은 이벤트 리스너를 추가 할 수 있습니다.

   나는 일반적으로 클릭 대신에 사용합니다. 그것은 나 특정 기능에 더 많은 이벤트 리스너를 추가 할 수 있습니다.

   $(document).on("click touchend", ".class1, .class2, .class3", function () {
        //do stuff
   });
   

3. ---

   3.

   $('.class1, .class2').click(some_function);
   

   있는지 확인은 $처럼 ( '. Class1의 공간 here.class2') 또는 다른 사람은하지 않습니다 작업 공간을 넣어.

4. ---

   4.간단히 $를 사용 ( '. myclass1, .myclass2, .myclass3') 여러 선택기합니다. 또한, 당신은 클릭 이벤트에 기존의 기능을 결합 할 필요 람다 기능을 해달라고.

   간단히 $를 사용 ( '. myclass1, .myclass2, .myclass3') 여러 선택기합니다. 또한, 당신은 클릭 이벤트에 기존의 기능을 결합 할 필요 람다 기능을 해달라고.

5. ---

   5.또 다른 방법은, 당신의 요소를 가정하는 것은 (당신은 함수 본문에서 그들에게 여러 번 액세스하는 경우 종종 좋은 아이디어 인) 변수로 저장됩니다

   또 다른 방법은, 당신의 요소를 가정하는 것은 (당신은 함수 본문에서 그들에게 여러 번 액세스하는 경우 종종 좋은 아이디어 인) 변수로 저장됩니다

   function disableMinHeight() {
       var $html = $("html");
       var $body = $("body");
       var $slideout = $("#slideout");
   
       $html.add($body).add($slideout).css("min-height", 0);
   };
   

   jQuery를 체인을 활용하고 참조를 사용할 수 있습니다.

6. ---

   6.당신이 또는 변수와 같은 요소를 (jQuery를 개체를) 유지하려면 할 수 있습니다 그들에 또한 루프 :

   당신이 또는 변수와 같은 요소를 (jQuery를 개체를) 유지하려면 할 수 있습니다 그들에 또한 루프 :

   var $class1 = $('.class1');
   var $class2 = $('.class2');
   
   $([$class1,$class2]).each(function() {
       $(this).on('click', function(e) {
           some_function();
       });
   });
   

7. ---

   7.이 같은 클래스의 쉼표로 구분 된 목록을 추가합니다 :

   이 같은 클래스의 쉼표로 구분 된 목록을 추가합니다 :

   jQuery(document).ready(function($) {
   
   $('.class, .id').click(function() { 
   
   //  Your code
   
       }
   
   });
   

8. ---

   8.우리는 또한 다음과 같이 코딩 할 수 있습니다, 여기 사용 된 흐림 이벤트가 있습니다.

   우리는 또한 다음과 같이 코딩 할 수 있습니다, 여기 사용 된 흐림 이벤트가 있습니다.

   $("#proprice, #proqty").blur(function(){
         var price=$("#proprice").val();
         var qty=$("#proqty").val();
         if(price != '' || qty != '')
         {
             $("#totalprice").val(qty*price);
         }
     });
   

9. ---

   9.저도 같은 이벤트에 의해 처리 될 필요 많은 입력 필드를 포함하는 객체에 대한 링크가 있습니다. 단순히 찾기를 사용 그래서 () 이벤트를 가지고 그 필요성을 모든 내부 객체를 얻을 수 있습니다

   저도 같은 이벤트에 의해 처리 될 필요 많은 입력 필드를 포함하는 객체에 대한 링크가 있습니다. 단순히 찾기를 사용 그래서 () 이벤트를 가지고 그 필요성을 모든 내부 객체를 얻을 수 있습니다

   var form = $('<form></form>');
   // ... apending several input fields
   
   form.find('input').on('change', onInputChange);
   

   경우 귀하의 개체가 링크 아이들 한 수준 아래입니다 () 대신 방법을 사용할 수있다 () 찾을 수 있습니다.

10. ---

    10.위의 우수 사례에 대한 답변뿐만 아니라, 당신은 또한 자신의 클래스를 사용하여 서로 다른 두 가지 요소에 대해 "발견"할 수 있습니다. 예를 들면 :

    위의 우수 사례에 대한 답변뿐만 아니라, 당신은 또한 자신의 클래스를 사용하여 서로 다른 두 가지 요소에 대해 "발견"할 수 있습니다. 예를 들면 :

    <div class="parent">
    <div class="child1">Hello</div>
    <div class="child2">World</div>
    </div>
    
    <script>
    var x = jQuery('.parent').find('.child1, .child2').text();
    console.log(x);
    </script>
    

    이해야 출력이 "Helloworld".

from https://stackoverflow.com/questions/1313373/jquery-same-click-event-for-multiple-elements by cc-by-sa and MIT license