我需要再次加载javascript吗答案

【问题标题】：Do i need to load javascript again我需要再次加载javascript吗
【发布时间】：2015-01-13 11:43:10
【问题描述】：

我正在通过 jquery 在表中添加一行。每行都有一些与之关联的javascript。当我使用 jquery 添加新行时，javascript 适用于以前的行，但不适用于新添加的行。

我需要再次加载相同的 js 吗？如果是，怎么做？

js 适用于已经 html 行，但不适用于我添加的行

<table>
    <tr id="hello12">
        <div class="formField" style="float:right" >
            <span class="btn btn-success fileinput-button" >
                <i class="glyphicon glyphicon-plus"></i>
                <span>Add Attachments...</span>
                <input id="fileupload" type="file" name="attachment" multiple>
            </span>
        </div>
    </tr>
    </tr>
    <tr class="row">
        <td>
            <button type="button" id="override_button">
                <b>+</b>
            </button>
        </td>
    </tr>
</table>

$('#fileupload').fileupload({
    url: '/attachments/create',
    dataType: 'json',
    done: function (e, data) {
       alert("done");
    },

});

 $('#override_button').click(function(){
   alert("hello")

$('#hello12').after('\ <tr id="hello12">
        <div class="formField" style="float:right" >
            <span class="btn btn-success fileinput-button" >
                <i class="glyphicon glyphicon-plus"></i>
                <span>Add Attachments...</span>
                <input id="fileupload" type="file" name="attachment" multiple>
            </span>
        </div>
    </tr>')
});

【问题讨论】：

是的。如果没有看到您的代码，我们无法确定如何告诉您。您要么需要重新附加事件，要么使用委托的事件处理程序。
只告诉我在表格中添加一行后如何再次加载js？这如何与代码链接..
只需向我们展示您的代码，我们会提供帮助。除非您在此处发布一些代码只是为了让您知道，否则您的问题更有可能被关闭。
询问有关特定代码的问题没有发布相关代码是很愚蠢的，不是吗？也许是，也许不是，谁知道？？？
我们的意思是您的 JS 代码，它在第一个实例中附加了您的事件处理程序。

标签： javascript jquery html ruby-on-rails

【解决方案1】：

你可以使用onjquery函数：

$("table").on("click", "#override_button", function(event){
    alert("done");
});

或者如果您在 1.7 之前使用 jquery，请检查 live 函数

示例：http://jsfiddle.net/rad_101/99q5jwrx/1/

【讨论】：

但我需要重新加载 js 并且监听器在行上，无法将其添加到表中
我创建了一个示例，我更改了您的代码。但主要思想是on函数jsfiddle.net/rad_101/99q5jwrx

【解决方案2】：

案例 1：您很难重新加载脚本（我认为根本没有必要）。您可以将脚本保存在外部文件中，并将其附加到 html 页面的头部。

<script language="text/javascript">
   function load_js()
   {
      var head= document.getElementsByTagName('head')[0];
      var script= document.createElement('script');
      script.type= 'text/javascript';
      script.src= 'source_file.js';
      head.appendChild(script);
   }

   // call the function, so as to run the scripts again on the page
   load_js();
</script>

案例 2：（更有效）使用（正如 Dimitris Nastos 指出的那样）

      $(document).on("click", "table .row", function(){
         //write your "ASSOCIATED JS" code here.
      });

这会将单击事件绑定到文档及其中的所有子元素。然后它匹配作为第二个参数提供的元素标识符。也适用于动态元素。

案例 3：（效率稍高）在您的情况下， table 是一个静态元素，并且是新行的父元素。因此，不要在编写 $(document).on("click","element",function(){}) 时遍历整个 DOM，而是使用

      $(table).on("click", "table .row", function(){
         //write your "ASSOCIATED JS" code here.
      });

【讨论】：

【解决方案3】：

所以，经过一番挣扎，我终于得到了答案，

Fileupload 会在加载后将动作绑定到 html，因此如果您向页面添加新的 html，对于每个元素，您必须再次绑定文件上传。（您也可以使用实时动作将事件添加到按钮，在这种情况下您不需要再次绑定）

var dofileupload = function(){
$('#fileupload').fileupload({
url: '/attachments/create',
dataType: 'json',
done: function (e, data) {
   alert("done");
},
});
}

$('#override_button').click(function(){
alert("hello")

$('#hello12').after('\ <tr id="hello12">
    <div class="formField" style="float:right" >
        <span class="btn btn-success fileinput-button" >
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add Attachments...</span>
            <input id="fileupload" type="file" name="attachment" multiple>
        </span>
    </div>
</tr>')
}).each(function () {
 dofileupload
}

This solves my problem

【讨论】：