외부 함수 호출 js

Question

외부 js가 있는데 이는 내 HTML에서 div 중 하나의 내부에서 호출됩니다.

var script = document.createElement("script"); 
script.innerHTML = '$("body").prepend(\'<input type="hidden" id="sid" value="0">\');var vl=0;$(".sbut").click(function(){vl ++; var snew=vl;$("#sid").val(snew).trigger("change");});';   
document.head.appendChild(script); 

$("#sid").change(function(){ 
    alert("change"); 
});   

경고가 트리거되지 않은 : 그 외부 파일에서 나는 다음과 같은 코드가 있습니다. 내가 이것을 시도하면 :

var script = document.createElement("script"); 
script.innerHTML = '$("body").prepend(\'<input type="hidden" id="sid" value="0">\');var vl=0;$(".sbut").click(function(){vl ++; var snew=vl;$("#sid").val(snew).trigger("change");});$("#sid").change(function(){somef();alert("change");}); ';  
document.head.appendChild(script); 

function somef(){ 
    alert("change"); 
} 

나는 나의 함수 somef가 정의되지 않는다. 나는 이것이 내 기능의 순서로 무언가를해야한다고 생각하지만 정확히 무엇이 정확한지는 모르겠다. 누군가 적절한 방법이 무엇인지 제안 할 수 있습니까? 또한 내 외부 스크립트 (fscript.js)는 HTML에서 div 중 하나에서 호출되며 HTML에 액세스 할 수 없으므로 변경할 수 없습니다. 그래서 나는 입력과 스크립트도 덧붙인다.

Answer 1

나는 이유를 볼 수 없습니다, 당신은 동적으로 sid 요소를 추가하고, 바인드 변경 이벤트 핸들러, 내가 코멘트에서 언급 한 바와 같이 이벤트 핸들러에게

$(document).on("change","#sid",function(){ 
    alert("change"); 
}); 

Answer 2

를 바인딩하는 코드 아래하려고 할 때 따라서는 사용할 수 없습니다 스크립트를 문자열로 작성하고 스크립트 태그로 삽입하십시오. fscript.js이 이미로드되어 코드를 작성할 수 있으므로 페이지의 스크립트 태그에있는 것처럼 동일한 컨텍스트에서 실행됩니다.

이것이 내가 작성하는 방법입니다.

// Use an IIFE to encapsulate our code so our variables don't leak into 
 
// the global namespace. This will ensure they don't collide with 
 
// and existing JS in the page avoiding creating bugs in both our code 
 
// and the surrounding page 
 
(function() { 
 
    'use strict'; 
 

 
    var vl = 0, 
 
    // create the sid element and store a reference to the 
 
    // returned jQuery object in a variable we can use to 
 
    // refer to it later 
 
    sid = $('<input type="hidden" id="sid" value="0">'); 
 

 
    // attach the change event to sid 
 
    sid.change(function() { 
 
    alert('Change, sid is now ' + sid.val()); 
 
    });  
 

 
    // inject sid into the DOM 
 
    $('body').prepend(sid); 
 

 
    // use event delegation to add the click event for .sbut 
 
    // this will ensure that any .sbut elements in the HTML 
 
    // after this script is run will have the click handler 
 
    // If you know that .sbut will always appear above the place 
 
    // where your script runs, you could just use a normal 
 
    // jQuery selector instead. 
 
    $(document).on('click', '.sbut', function() { 
 
     vl++; 
 
     // there doesn't seem to be any need to create the 
 
     // snew var here, its value is exactly the same as vl 
 
     // at this point, just use vl 
 
     sid.val(vl).trigger('change'); 
 
    }); 
 
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="sbut">.sbut</button>

는 나는 그 반대로 페이지 에 다른 코드를 방해하지 않도록를 캡슐화하는 코드를 포장하는 Immediately-Invoked Function Expression (IIFE) 를 사용합니다. strict mode, 을 사용하면 일반적인 유형의 버그가 발생하지 않도록하고 모범 사례를 적용하는 것이 좋습니다.

스크립트를로드 한 후에 .sbut 요소가 발생하는지 알 수 없기 때문에 클릭 이벤트를 .sbut에 첨부하기 위해 event delegation을 사용했습니다. 그럴 수도 있습니다. 스크립트가로드되기 전에 .sbut이 항상 발생한다는 것을 알고 있다면 보통 $('.sbut').click(function() {}); 처리기로 변경할 수 있습니다.