>source

구문 오류가 발생하지만 제대로 구할 수 없습니다.

내가 이루고자하는 것 :

<input type='checkbox' onclick="document.location.href ='http://google.com'" >

prepend() 내부에onclick이벤트를 추가해야합니다  대상이 변수 인 방법입니다.

원래 기능을 포함하고 있습니다 :

function AddTickBoxesToOptions() {
            $('.filter-options-content .item').each(function(){
                var FilterLink = $(this).find("a").attr("href");
                $(this).prepend("<input class='filterCheckBox' type='checkbox' onClick='document.location.href='" + FilterLink + "' >");
            });
        }

<시간>

스 니펫 (작동하지 않습니다 ...) :

var link = "https://google.com";
$('#myDiv').prepend("<input type='checkbox' onClick='document.location.href='" + link + "' >")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">
  <p>
  the div
  </p>
</div>


  • 답변 # 1

    onclick 를 추가하는 대신  속성을 사용하려면 JS 코드를 통해 이벤트 핸들러를 바인딩하는 것이 좋습니다. 그러면 변수 참조와 관련된 문제를 피할 수 있습니다.

    var link = "https://google.com";
    $('#myDiv').prepend($("<input>").attr("type", "checkbox").click(function () {
        document.location.href = link;
    }));
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="myDiv">
      <p>
      the div
      </p>
    </div>
    
    

  • 답변 # 2

    인라인 자바 스크립트 코드를 작성하고 코드를 확인하는 것은 좋지 않습니다. 함수를 만들고 onclick 이벤트에서 호출했습니다.

    var link = "https://google.com";
    $('#myDiv').prepend("<input type='checkbox' onclick='exec()' />");
    function exec(){ document.location.href=link; }    
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="myDiv">
      <p>
      the div
      </p>
    </div>
    
    

  • 답변 # 3

    이러한 방식으로 작성할 때 브라우저가 이벤트 핸들러를 작성하지 않습니다 (DOM이 준비되면 브라우저가 자동으로 읽으므로 HTML 코드로 수행 할 수 있음). 따라서 Javascript로 이벤트 핸들러를 정의해야합니다. 더 좋은 방법 :

    $('.filter-options-content .item').each(function(){
        var FilterLink = $(this).find("a").attr("href");
        var newElem = $(this).prepend("<input class='filterCheckBox' type='checkbox' >");
        newElem.data('targetLocation', FilterLink).click(function(){
            document.location.href = $(this).data('targetLocation');
        });
    });
    
    

관련 자료

  • 이전 NET Framework에없는 레거시 dll을 사용하여 NuGet 패키지 (또는 다른 패키지)를 만들 수 있습니까?
  • 다음 google sheets - 스크립트를 사용한 드롭 다운 선택을 기반으로 값 설정