Question

我通过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>')
});

Answer 1

您可以使用on jquery函数：

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

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

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

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

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

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

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

Answer 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

我需要再次加载JavaScript吗？

3 个答案: