我需要再次加载JavaScript吗?

Do i need to load javascript again

本文关键字：JavaScript 加载      更新时间：2023-09-26

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

我需要再次加载相同的 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>')
});

您可以使用on jquery 函数：

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

或者如果你使用1.7之前的jQuery，检查live函数

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

情况 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.
      });

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

情况3：（效率更高）在您的情况下，表是静态元素，并且是新行的父元素。因此，与其在编写 $（document）.on（"click"，"element"，function（）{} 时遍历整个 DOM，请使用

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

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

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

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

相关文章：