調用函數形式外部js

我有外部js，它在我的HTML中的一個div的內部調用。在外部文件中我有下面的代碼：調用函數形式外部js

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。這就是爲什麼我追加輸入和腳本。

來源

2017-03-01 codexy

頁面中的哪個位置是'.sbut'元素？任何在腳本中低於腳本的'.sbut'元素都不會附加到它們的點擊處理程序。另外...如果你能夠使用ES2015（或者從它開始編譯）編寫你正在注入的HTML，使用模板字符串會更加可讀，因爲你可以在它們中使用換行符。 –

想想吧，我不明白你爲什麼把這段代碼寫成一個字符串並注入腳本標記。您已經加載了一個外部腳本，應該沒有理由不能將它寫入該文件。除非你還在這個腳本的一部分注入了jQuery，而你沒有向我們展示這些腳本標記，以確保執行順序？ –

雖然，你也在腳本字符串之外使用jQuery，所以我假設它已經加載到頁面中了？ –

你動態地添加sid元素，因此它是不可用時綁定修改事件處理程序，請嘗試以下代碼綁定事件處理程序

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

來源

2017-03-01 14:48:06

仍然不能正常工作 – codexy

輸入的值正在改變，我在控制檯中沒有任何錯誤，但是更改沒有緩存在外部文件中 – codexy

您需要在完成更改後單擊輸入框外部。你可以清除你的瀏覽器緩存並嘗試。還有一件事就像'sid'在DOM中必須是唯一的。 –

正如我在評論中提到的，我沒有看到一個理由將腳本編寫爲字符串並將其注入爲腳本標記。 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, 也是一種很好的做法，它可以幫助避免一些常見類型的錯誤並實施一些最佳實踐。

我用event delegation將點擊事件附加到.sbut，因爲我不知道你的腳本加載後是否有.sbut元素出現，似乎可能是這種情況。如果您知道.sbut將始終發生在腳本加載之前，您可以將其更改爲正常的$('.sbut').click(function() {});處理程序。

來源

2017-03-03 14:50:50

調用函數形式外部js

回答

相關問題