从外部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");
}

然后我就知道我的函数没被定义。我猜这与我的函数顺序有关，但我不确定具体是什么。有没有人能建议我用什么方法来做这件事？另外，我的外部脚本(fscript.js)是在超文本标记语言中的一个div中调用的，我不能更改它，因为我没有访问超文本标记语言的权限。这就是为什么我还附加了输入和脚本。

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也是一个很好的实践，它可以帮助避免一些常见类型的错误，并强制执行一些最佳实践。

我使用event delegation将单击事件附加到.sbut，因为我不知道在加载脚本后是否会发生任何.sbut元素，看起来可能是这样的。如果您知道.sbut总是在脚本加载之前发生，那么只需将其更改为一个普通的$('.sbut').click(function() {});处理程序即可。