발견되지 않은 구문 오류: 'Document'에서 'querySelector'를 실행하지 못했습니다.

발견되지 않은 구문 오류: 'Document'에서 'querySelector'를 실행하지 못했습니다.

<button id="'+item['id']+'" class="btnDeactivateKeyInChildPremiumCustomer waves-effect waves-light">ok</button>

저는 각 함수의 jquery 내부에 버튼을 생성하기 위해 위의 코드를 사용했습니다.버튼이 동적으로 생성되어 버튼을 클릭하면 버튼에 진행 상황이 표시됩니다.저는 이 라다 버튼 로더를 사용하고 있습니다.

btnDeactivateKeyInChildPremiumCustomerClick : function(event){
   var id = event.currentTarget.id;
   var btnProgress = Ladda.create(document.querySelector('#'+id));
   // btnProgress.start(); or btnProgress.stop();
}

그리고 위의 기능을 이벤트 처리기가 이벤트 프로세스를 캡처하는 버튼을 전달했습니다.이 함수 안에 btnProgress 개체를 만듭니다.그런 다음 start() 또는 stop() 함수를 호출할 수 있습니다.각각의 내부에 동적으로 버튼을 만들지 않고 하나의 버튼의 경우만 성공적으로 작업했습니다. 하지만 각각의 경우 vartnProgress = Ladda.create(문서)를 실행하는 동안 오류가 발생합니다.쿼리 선택기('#'+id);

오류

Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '#22' is not a valid selector.

HTML5 문서에서 숫자로 시작하는 ID를 사용할 수 있습니다.

값은 요소의 홈 하위 트리에 있는 모든 ID에서 고유해야 하며 하나 이상의 문자를 포함해야 합니다.값에 공백 문자를 포함할 수 없습니다.

ID의 형식에 대한 다른 제한은 없습니다. 특히 ID는 숫자, 숫자, 밑줄, 구두점 등으로 구성될 수 있습니다.

그렇지만querySelector메소드는 DOM을 쿼리하기 위해 CSS3 선택기를 사용하며 CSS3는 숫자로 시작하는 ID 선택기를 지원하지 않습니다.

CSS에서 식별자(선택기의 요소 이름, 클래스 및 ID 포함)는 [a-zA-Z0-9] 및 ISO 10646 문자 U+00A0 이상과 하이픈(-) 및 밑줄(_)만 포함할 수 있으며, 숫자, 두 개의 하이픈 또는 숫자 뒤에 오는 하이픈으로 시작할 수 없습니다.

다음과 같은 값 사용b22사용자 코드가 작동합니다.

ID로 요소를 선택하려는 경우 사용할 수도 있습니다..getElementById방법:

document.getElementById('22')

HTML에서는 유효하지만 CSS 셀렉터에서는 정수로 시작하는 ID를 사용할 수 없습니다.

지적했듯이, 당신은 사용할 수 있습니다.getElementById대신, 하지만 당신은 여전히 같은 것을 성취할 수 있습니다.querySelector:

document.querySelector("[id='22']")

언급URL : https://stackoverflow.com/questions/37270787/uncaught-syntaxerror-failed-to-execute-queryselector-on-document