jQuery $ (“. class”). click (); -여러 요소, 클릭 이벤트 한 번

동일한 이름의 페이지에 여러 클래스가 있습니다. 그런 다음 JS에 .click () 이벤트가 있습니다. 내가 원하는 것은 내 페이지의 여러 클래스에 관계없이 클릭 이벤트가 한 번만 발생한다는 것입니다.

시나리오는 AJAX를 사용하여 장바구니에 추가하는 것입니다. 때로는 홈 페이지에 추천 제품과 최고 오퍼가있을 수 있습니다. 즉, 동일한 클래스 .add. # productid #가 있고 클릭하면 장바구니에 추가 AJAX가 두 번 실행됩니다.

.container-name .add. # pid #를 사용하여 고유 한 클릭을 제공하도록 '클릭 영역'을 만드는 것에 대해 생각했습니다.

이것이 유일한 해결책입니까?

<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>


$(".addproduct").click(function(){//do something fired 5 times});

이 오래된 스레드를 부딪쳐서 죄송합니다. 나는 지금 같은 문제가 있었고 내 해결책을 공유하고 싶었습니다.

$(".yourButtonClass").on('click', function(event){
    event.stopPropagation();
    event.stopImmediatePropagation();
    //(... rest of your JS code)
});

event.StopPropagation및 event.StopImmediatePropagation()트릭을 할해야합니다.

이벤트 핸들러에 대한 .class 선택기가 있으면 bubbling클릭 이벤트가 발생합니다 (때로는 부모 요소로, 때로는 DOM의 하위 요소로).

event.StopPropagation()method는 이벤트가 Parent 요소로 버블 링되지 않도록하는 반면 event.StopImmediatePropagation()method는 이벤트가 원하는 클래스 선택기의 Children 요소로 버블 링되지 않도록합니다.

출처 : https://api.jquery.com/event.stoppropagation/ https://api.jquery.com/event.stopimmediatepropagation/

$(document).on('click', '.addproduct', function () {
    // your function here
});

클릭 핸들러를 볼 수 있습니까? 5 개의 다른 요소에 5 명의 리스너를 연결하고 있습니다. 그러나 사용자가 요소를 클릭하면 하나의 이벤트 만 발생합니다.

$(".addproduct").click(function(){
  // Holds the product ID of the clicked element
  var productId = $(this).attr('class').replace('addproduct ', '');

  addToCart(productId);
});

이 솔루션이 작동하지 않으면 클릭 핸들러를 살펴보고 싶습니다.

addproduct class로 div를 클릭하면 5 개가 아닌 특정 요소에 대해 1 개의 이벤트가 발생합니다. 이벤트가 5 번 발생하면 코드에서 뭔가 잘못하고있는 것입니다.

이 상황에서 나는 시도 할 것이다 :

$(document).on('click','.addproduct', function(){

    //your code here

 });

그런 다음 동일한 클래스를 가진 다른 요소에서 하나를 클릭하여 수행해야하는 경우 요소를 반복 할 수 있습니다.

$(document).on('click','.addproduct', function(){
   $('.addproduct').each( function(){

      //your code here
     }
  );
 }
);

클릭 이벤트를 5 번 추가 한 것 같습니다. 이 일을 몇 번이나 세어보십시오.

console.log('add click event')
$(".addproduct").click(function(){ });

이것은 그것을 고쳐야하고 좋은 습관이어야합니다 : .unbind ()

$(".addproduct").unbind().click(function(){
   //do something 
});

인라인 jquery 함수 호출을 사용하여 해결했습니다.

<input type="text" name="testfield" onClick="return testFunction(this)" /> 

<script>
  function testFunction(current){
     // your code go here
  }
</script>

나는 단지 같은 문제가 있었다. 제 경우에는 PHP 코드가 동일한 jQuery 코드를 몇 번 생성했으며 다중 트리거였습니다.

<a href="#popraw" class="report" rel="884(PHP MULTIPLE GENERATER NUMBERS)">Popraw / Zgłoś</a>

(PHP MULTIPLE GENERATER NUMBERS도 동일한 코드를 여러 번 생성했습니다.)

<script type="text/javascript">
$('.report').click(function(){...});
</script>

내 해결책은 다른 PHP 파일에서 스크립트를 분리하고 해당 파일을 한 번로드하는 것이 었습니다.

여기에 코드를 입력하기 만하면 JQuery에서 ones 이벤트가 트리거됩니다. 파일의 클래스 발생 수를 확인하고 다음 논리에 for 루프를 사용하기 만하면됩니다. JQuery를 통해 클래스, 태그 또는 DOM 요소의 발생 횟수를 식별합니다. var len = $ ( ". addproduct"). length;

 $(".addproduct").click(function(){
       var len = $(".addproduct").length; 
       for(var i=0;i<len;i++){
          ...
        }
 });

나는 같은 문제가 있었다. 원인은 동일한 jquery를 여러 번 사용했기 때문입니다. 그는 루프에 배치되었습니다.

$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});

이런 이유로 여러 번 발사되었습니다

내 프로젝트에서 직접 시도했습니다.

테이블의 모든 행에는 "연락처"클래스가 있습니다.

내 코드는 다음과 같습니다.

var contactManager = {};

contactManager.showEditTools = function(row) {
  console.debug(row);
}

$('.contact').click(function(event){
  console.log("this should appear just once!");
  alert("I hope this will appear just once!");
  contactManager.showEditTools(event);
});

그리고 코드를 실행할 때 Firebug 콘솔에서 결과로 전체 행을 보는 것이 처음 무서웠습니다.

그러나 경고 대화 상자가 나타나지 않았기 때문에 클릭 이벤트가 발생하지 않았 음을 깨달았습니다. Firebug는 클릭 오버라이드의 영향을받는 요소 만 보여줍니다. 따라서 걱정할 것이 없습니다.

.off()핸들러를 사용해보십시오 .

$(function () {
    $(".archive-link").click(function (e) {
        var linkObj = $(this);
        var cb = $("#confirm-modal");
        cb.find(".modal-body").append("<p>Warning message.</p>");
        cb.modal('show'); 
        cb.find(".confirm-yes").click(function () {
            $(this).off(); //detach this event
            //ajax call yada yada..
        }

OK 모달 버튼에 클릭 이벤트 핸들러를 첨부하여 click클래스가있는 객체의 이벤트에 대해 작동합니다..archive-link .

첫 번째 클릭에서 이벤트 .archive-link는 내가 함수가 작동하도록 요청한 객체 에서만 발생합니다 ( var linkObj). 그러나 동일한 링크를 두 번 클릭하고 모달에서 확인을 누르면 .archive-link이전에 클릭 한 모든 개체에서 이벤트가 발생합니다 .

위의 솔루션을 사용했지만 안타깝게도 작동하지 않았습니다. 전파가 중지 된 것은 모달 OK 버튼 클릭 함수 내에서 .off ()를 호출했을 때였습니다. 이게 도움이 되길 바란다.

이 질문은 해결되었고 많은 답변을 받았지만 뭔가 추가하고 싶습니다. 내 클릭 요소가 한 번이 아닌 77 번 실행되는 이유를 알아 내려고했습니다.

내 코드에서 json 응답을 실행하고 버튼이있는 div로 표시하는 각각이 있습니다. 그런 다음 각각 내부에서 클릭 이벤트를 선언했습니다.

$(data).each(function(){
    button = $('<button>');
    button.addClass('test-button');
    button.appendTo("body");

    $('.test-button').click(function(){
        console.log('i was clicked');
    })
})

이와 같이 코드를 작성하면 .test-button 클래스가 여러 클릭 이벤트를 가져옵니다. 예를 들어, 내 데이터에는 77 줄이 있으므로 각 줄은 77 번 실행됩니다. 즉, 클래스의 클릭 이벤트를 77 번 거부합니다. 요소를 클릭하면 77 번 발생합니다.

하지만 다음과 같이 쓰면 :

$(data).each(function(){
    button = $('<button>');
    button.addClass('test-button');
    button.appendTo("body");
})

    $('.test-button').click(function(){
        console.log('i was clicked');
    })

각각 뒤에 클릭 요소를 선언합니다. 즉, 각각 77 번 실행되고 클릭 요소는 한 번만 선언됩니다. 따라서 요소를 클릭하면 한 번만 실행됩니다.

코드 아래에서 절대적으로 잘 작동합니다.

$(".addproduct").on('click', function(event){
    event.stopPropagation();
    event.stopImmediatePropagation();
    getRecord();
});


function getRecord(){
   $(".addproduct").each(function () {
       console.log("test");
       });

}

안녕하세요이 게시물 이이 문제에 직면 해 죄송합니다. 제 경우를 보여주고 싶습니다.

내 코드는 다음과 같습니다.

<button onClick="product.delete('1')" class="btn btn-danger">Delete</button>
<button onClick="product.delete('2')" class="btn btn-danger">Delete</button>
<button onClick="product.delete('3')" class="btn btn-danger">Delete</button>
<button onClick="product.delete('4')" class="btn btn-danger">Delete</button>

자바 스크립트 코드

<script>
 var product = {
     //  Define your function
     'add':(product_id)=>{
          //  Do some thing here
     },

     'delete':(product_id)=>{
         //  Do some thig here
     }
 }
</script>

이벤트는 한 번만 트리거되므로이 코드가 작동 할 수 있습니다.

    $(".addproduct,.addproduct,.addproduct,.addproduct,.addproduct").click(function(){//do     something fired 5 times});