jQuery $(.class").click(); - 다중 요소, 이벤트 한 번 클릭

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()요소에 이 생기지,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);
});

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

제품 클래스 추가와 함께 div를 클릭하면 5개가 아니라 해당 특정 요소에 대해 1개의 이벤트가 발생합니다.이벤트가 5번 발사되면 코드에서 잘못된 행동을 하는 것입니다.

이 상황에서 저는 다음을 시도할 것입니다.

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

    //your code here

 });

그런 다음 같은 클래스를 클릭하여 다른 요소에서 무언가를 수행해야 할 경우 요소를 반복할 수 있습니다.

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

      //your code here
     }
  );
 }
);

당신은 클릭 이벤트를 다섯 번 추가하는 것 같습니다.이것을 몇 번이나 하는지 세어 보세요.

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 Generator Numbers 또한 동일한 코드가 여러 번 생성됨)

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

나의 해결책은 스크립트를 다른 php 파일로 분리하고 그 파일을 한 번 로드하는 것이었습니다.

$(document).ready(function(){

    $(".addproduct").each(function(){
          $(this).unbind().click(function(){
               console.log('div is clicked, my content => ' + $(this).html());
           });
     });
}); 
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="addproduct 151">product info 1</div>
<div class="addproduct 151">product info 2</div>
<div class="addproduct 151">product info 3</div>
<div class="addproduct 151">product info 4</div>
<div class="addproduct 151">product info 5</div>

저도 같은 문제가 있었습니다.원인은 제가 같은 농담을 여러 번 했기 때문입니다.그는 곤경에 처했습니다.

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

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

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

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

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

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


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

}

저는 제 프로젝트에서 직접 시도했습니다.

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

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

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(함수에작요개체한청업을▁that개(체▁object()var linkObj) 같은 를 두 .archive-link클릭한 적이 있습니다.

위의 솔루션을 사용했지만 아쉽게도 작동하지 않았습니다.modal 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');
    })
})

이렇게 코드를 작성하면 class.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회 실행되고 클릭 요소는 한 번만 선언됩니다.따라서 요소를 클릭하면 한 번만 실행됩니다.

안녕하세요, 이 게시물에 부딪혀서 죄송합니다. 이 문제에 직면해서 저는 제 사례를 보여드리고 싶습니다.

제 코드는 이렇게 생겼습니다.

<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>

class name을 dot(.)으로 표시하고 click method를 클릭하면 class name add product를 지정한 위치를 클릭할 때 트리거됩니다.

$(".addproduct").click(function(){
  //your logic on click
  console.log("clicked");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

javascript로 여러 개의 중복 요소를 만들고 페이지 로드 시 HTML에 삽입할 때 Jquery.click()이 작동하지 않습니다.

이 경우 javascript에서 요소를 생성할 때 onClick 태그를 html 요소에 부착합니다.

$("#items").html('<button onClick="delete_item(`'+item+'`)" value="'+item+'">Remove</button>');

나중에 이 버튼을 클릭하면 delete_item() 함수가 실행되고 전달됩니다.this나중에 사용할 수 있습니다.

function delete_item(item){

    console.log(item);

}

이것이 이것에 대한 유일한 대답입니다.

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

이벤트는 한 번만 트리거됩니다.그래서 이 코드가 작동할 수도 있습니다.

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

언급URL : https://stackoverflow.com/questions/5563783/jquery-class-click-multiple-elements-click-event-once