앵커의 클릭 이벤트가 실행되지 않음

debugcn 에 게시 Dev

앨런

첫 번째 jquery 플러그인에서 작업 중입니다. 버튼의 단순한 캐 러셀입니다. 이전 및 다음 앵커가 있습니다. 실행되지 않는 이전 및 다음 앵커에 대한 클릭 이벤트입니다. 플러그인의 모든 요소는 jquery 스크립트에 의해 동적으로 생성됩니다. 필요한 유일한 html은 body 태그 내부의 <div id = "carousel"> </ div>입니다.

스크립트:

(function ( $ ) {

//create the array of days
var day_names = new Array("SUN","MON","TUE","WED","THU","FRI","SAT");
//The number of days in any given month.
var days_in_month = 0;
//the day of the month the first day lands on. In reference to the index of day_names array.
var starting_day = 0;
//Keep track if div.slides already has been loaded or not.
var loaded = false; 

$.fn.button_carousel = function(number_of_days, startingday){
  console.debug("initializing button carousel");
  days_in_month = number_of_days;
  starting_day = startingday;
  //Create initial carousel interface
  var container = $('div#carousel');
  container.append('<div id="nav_previous"><a href="#" id="prev"></a></div><div id="slides"><ul></ul></div><div id="nav_next"><a href="#" id="next"></a></div>');
  //populate unordered list with input type button elements.
  populate_carousel(number_of_days, startingday);     
  return this;    
};

$('div#carousel').on('click', 'a#prev', function(event) {
    event.preventDefault();
    console.debug("prev click");
});

$('div#carousel').on('click', 'a#next', function(event) {
    event.preventDefault();
    console.debug("next click");
});

function populate_carousel(number_of_days, startingday ) {
    days_in_month = number_of_days;
    starting_day = startingday;
    var index = starting_day;
    //alert("populating");
    if(loaded === false)
    {
      //first time loading input elements
      var container = $('div#slides ul');

      for(var i = 1; i < days_in_month; i++)
      {
        container.append('<li><input type="button" id="' + i + '" class="btn" value="' + day_names[index] + " " + i + '"></li>');
        if(index < 6)
           index++;
        else
           index = 0; //reset           
      }

      loaded = true;
    }
    else
    {
      var index = starting_day;
      //NOT the first time loading input elements
      var container = $('div#slides ul');
      //remove all the buttons
      container.remove('.btn');
      //then repopulate them
      for(var i = 1; i < days_in_month; i++)
      {
        container.append('<li><input type="button" id="' + i + '" class="btn" value="' + day_names[index] + " " + i + '"></li>');
        if(index < 6)
           index++;
        else
           index = 0; //reset           
      }

      loaded = true;

    }
}   

}( jQuery ));

CSS :

#carousel {
background-color: #ccffcc;
width:400px;
height:40px;    
margin:0 auto;
position:relative;
border:1px solid #ccc;
}

#carousel div{ display: inline-block;}

/* Styling for prev button */
#nav_previous {
padding:0 0 0 0;    
position:absolute;
top:5;
left:5;
width:30px;
height: 30px;   
}

#slides {
overflow:hidden;
/* fix ie overflow issue */
position:absolute;
width:300px;
height:30px;
border:1px solid #ccc;
top:5;
left:47;
background-color: #F5F6CE;
}

/* remove the list styles, width : item width=85 * total items=31 */    
#slides ul {
position:relative;
left:0;
top:0;
list-style:none;
margin:0;
padding:0;  
width:2635px;           
}

/* width of the item, in this case I put 250x250x gif */
#slides li {
width:85px;
height:30px;    
float:left;
}

/* Styling for next button */
#nav_next {
padding:0 0 0 0;    
position:absolute;
top:5;
left:364;
width:30px;
height: 30px;   
}

#nav_previous a {
display:block; 
width:31px; 
height:32px;
text-indent:-999em; 
outline:0;  
}

#nav_next a {
display:block; 
width:31px; 
height:32px;
text-indent:-999em; 
outline:0;  
}

a#prev {
  background:url(images/left_black_arrow.png) no-repeat; 
}

a#prev:hover {
  background:url(images/left_white_arrow.png) no-repeat;
}

a#next {
  background:url(images/right_black_arrow.png) no-repeat; 
}

a#next:hover {
  background:url(images/right_white_arrow.png) no-repeat;
}

input.btn {
 height:30px;
 width:85pm;
 padding-right: 5px;
 padding-left: 5px;
}

.clear {clear:both}

HTML :

<html>
<head>
<title>Carousel</title>
<link rel="stylesheet" type="text/css" href="button_carousel.css">
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" carset="utf-8" src="button_carousel.js"></script>

<script>
$(document).ready(function() {
  //October has 31 days, therefore 31 buttons are required.
  var carousel = new $.fn.button_carousel(31,4);
});
</script>
</head>
<body>
<div id="carousel"></div>
</body>
</html>

보시다시피 각 클릭 이벤트 내에 console.debug () 문이 있습니다. 둘 다 콘솔에 쓰지 않습니다. 이해가 안 돼요. 왜 발사되지 않습니까? 조언하십시오.

Norlihazmey Ghazali

이벤트 위임을 사용해 본 적이 있습니까? 동적 요소로 작업하는 경우이를 사용해야합니다. 예 :

$('#carousel').on('click', 'a#prev', function() {..});
// or
$('body').on('click', 'a#prev', function() {..});

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-15

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

앵커의 클릭 이벤트가 실행되지 않음

앵커의 클릭 이벤트가 실행되지 않음

jqplot 클릭 이벤트가 실행되지 않음

jQuery 클릭 이벤트 핸들러가 실행되지 않음

각도 클릭 이벤트가 실행되지 않음

녹아웃 클릭 이벤트가 실행되지 않음

Angular2 클릭 이벤트가 실행되지 않음

추가 된 앵커 태그 클릭 이벤트가 활성 클래스를 추가하지 않습니다. (추가 된 태그는 다른 앵커 태그의 클릭 이벤트에 의해 생성됨)

AngularJS ng-click 이벤트가 테이블 내의 앵커 태그에서 실행되지 않음

자바 스크립트의 클릭 이벤트가 트리거되지 않음

클릭 이벤트가 실행되지 않습니다.

동적 버튼 클릭시 이벤트 핸들러가 실행되지 않음

클릭 이벤트에서 window.addEventListener가 실행되지 않음

재단 공개 후 클릭 이벤트가 실행되지 않음

클릭했을 때 angularjs 버튼 이벤트가 실행되지 않음

첫 번째 클릭시 버튼 onclick 이벤트가 실행되지 않음

Google 크롬에서 백본 클릭 이벤트가 실행되지 않음

클릭시 앵커 스크롤이 작동하지 않음

하나의 기능 / 이벤트를 클릭하거나 실행할 때 일부 기능 / 이벤트가 실행되지 않도록하십시오.

IE11에서 한 번의 클릭으로 HTML의 앵커 태그가 작동하지 않음

IE11에서 한 번의 클릭으로 HTML의 앵커 태그가 작동하지 않음

클릭 $ 이벤트 = 정의되지 않음

UIBarButtonItem의 UIButton에 대해 클릭 된 핸들러가 실행되지 않음

앵커 태그에서 작동하지 않는 클릭 이벤트

지시문 내부의 AngularJS 이벤트 처리기가 실행되지 않음 / 파라 메트릭 이벤트 이름

앵커에 대한 일반 클릭 이벤트가 작동하지 않습니다.

버튼의 백본 클릭 이벤트가 작동하지 않음

버튼 클릭 이벤트가 트리거되지 않음

클릭 이벤트가 트리거되지 않음-jQuery

Aframe : 커서 클릭 이벤트가 데스크톱에서 트리거되지 않음

click () 메서드가 동적으로 생성 될 때 앵커에서 클릭 이벤트를 트리거하지 않음