JQuery에서 요소를 선택하고 간단한 이벤트를 실행할 수 없습니다.

debugcn 에 게시 Dev

브푼 잘란

JQuery 클릭 기능을 사용하여 "캔버스"에서 간단한 클릭 이벤트를 만들 수 없습니다.

$(document).ready(function(){
    alert("test");

    $("#canvas").click(function(){
        alert("canvas");
    });
    $(".middle").click(function(){
        alert("middle");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
        <div id="canvas">canvas</div>
</div>

"테스트"메시지가 나타나지만 위의 기능이 작동하지 않습니다. div "middle"의 다른 형제 (테스트를 위해 제거하려고 시도했기 때문에 포함하지 않았으며 여전히 발생 함) 는 이벤트를 실행할 수 있지만이 div와 내부에서만 단일 이벤트를 실행할 수 없습니다.

또한 시도 console.log($("#canvas"))하고 아래의 일부 데이터를 가져옵니다.

[div # canvas]

다음은 완전한 html입니다.

<!DOCTYPE html>
<html>
    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link href="/demo/resources/themes/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="/demo/resources/themes/custom/css/custom.css" rel="stylesheet" />
<script src="/demo/resources/themes/bootstrap/js/bootstrap.min.js"></script>
        <script src="/Sketchy-demo/resources/themes/custom/js/custom.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>App Page</title>
    </head>
    <body>

        <div class="middle">
            <div id="canvas"></div>
        </div>

    </body>
</html>

custom.css

.middle{
    z-index: -1;
    position: relative;
    display: block;
    height: 88%;
    width:100%;
    top: 0px;
    left:0px;
    margin: 0px;
    background-color: transparent;
}

#canvas{
    display: block;
    position: relative;
    height: 88%;
    width: 80%;
    margin: auto;
    top: 6%;
    background-color: white;
    border: 5px dashed black;
    border-radius: 10px;

}

아래는 div의 이미지입니다.

호출 할 수없는 기본 기능이기 때문에 정말 답답합니다.

편집하다:

https://jsfiddle.net/5mtt2khu/를 추가했습니다.

궁금한 점이 있으면 알려주세요. 감사!

프라 산스

함께 할 event.target요소 .And 조건과 일치

업데이트 된 js Fiddle

$(document).ready(function() {
 alert("test");
  
  $(".middle").click(function(e) { 
if($(e.target).attr('id')== 'canvas'){
alert('canvas')
//do stuff for canvas
}
else{
 alert("middle");
//do stuff for middle
}
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
  <div id="canvas">canvas</div>
</div>

업데이트 됨

제거 또는 변경 z-index

$(document).ready(function() {
  alert("test");
  $(".middle").click(function(e) {
    if ($(e.target).attr('id') == 'canvas') {
      alert('canvas')
      //do stuff for canvas
    } else {
      alert("middle");
      //do stuff for middle
    }
  });
});

.middle {
 z-index:0;/*remove or change > -1*/
  position: relative;
  display: block;
  height: 88%;
  width: 100%;
  top: 0px;
  left: 0px;
  margin: 0px;
  background-color: red;
}

#canvas {
  display: block;
  position: relative;
  height: 88%;
  width: 80%;
  margin: auto;
  top: 6%;
  background-color: white;
  border: 5px dashed black;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="middle">
  <div id="canvas"></div>
</div>

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

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

에서 수정2021-06-19

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

JQuery에서 요소를 선택하고 간단한 이벤트를 실행할 수 없습니다.

JQuery에서 요소를 선택하고 간단한 이벤트를 실행할 수 없습니다.

Jquery에서 추가 한 요소로 함수를 실행할 수 없습니다.

마우스 이벤트에 대한 쿼리를 실행할 수 없습니다.

드래그 앤 드롭 요소 jquery에서 클릭 이벤트를 실행할 수 없습니다.

매우 간단한 이벤트 리스너에서 변수를 함수에 전달할 수 없습니다.

html에서 여러 요소를 선택 및 선택 취소하고 선택한 항목을 추적 할 수 있습니다.

간단한 Hello World를 실행할 수 없습니다.

iOS 8에서 선택한 장치 오류를 사용하여 Xcode를 실행할 수 없습니다.

숭고한 텍스트에서 RstPreview 파서를 실행할 수 없습니다.

매우 간단한 COM 클라이언트를 실행할 수 없습니다.

내가 RIDE에서 간단한 테스트를 실행할 수 없습니다 (ROBOT 프레임 워크)

런타임에서 동적 버튼에 대한 버튼 클릭 이벤트를 실행할 수 없습니다.

DOM에서 요소를 선택할 수 없습니다.

JQuery-간단한 조건부 테스트를 수행 할 수 없습니다.

옵션을 선택한 후 jQuery를 사용하여 입력 요소를 비활성화 할 수 없습니다.

노드를 통해 콘솔에서 간단한 코드를 실행할 수 없습니다.

jQuery를 사용하여 요소의 형제를 선택할 수 없습니다.

동일한 요소에서 여러 이벤트를 수신하여 실행

jQuery 추가 양식 요소를 선택할 수 없습니다.

동일한 HTML 캔버스 요소 위에 패브릭 캔버스를 배치하고 만든 후 개체를 선택할 수 없습니다.

간단한 리프트 웹 예제를 실행할 수 없습니다.

간단한 Watir 스크립트를 실행할 수 없습니다.

jquery를 통해 옵션 선택에 대한 작업을 실행할 수 없습니다.

Nginx : 단일 URL에서 여러 사이트를 실행할 수 없습니다.

각도 구성 요소의 jquery 이벤트에서 모델 속성 변경에 대한보기를 업데이트 할 수 없습니다.

angular2에서 요소의 이벤트를 구독 할 수 없습니다.

변수로 jQuery 선택기. 적절한 요소를 선택할 수 없습니다.

JavaScript 이벤트를 사용하여 요소간에 데이터를 전송할 수 있습니까?

pycharm 오류 : 선택한 요소를 사용하여 리팩토링을 수행 할 수 없습니다.

Nautilus-Actions 상황에 맞는 메뉴를 사용하여 선택한 파일에서 스크립트를 실행할 수 없습니다.