将按钮从 button.html 添加到 index.html答案

【问题标题】：Add button from button.html to index.html将按钮从 button.html 添加到 index.html
【发布时间】：2014-12-04 14:59:51
【问题描述】：

我在 button.html 文件中有这段代码

 <button class="add_button">Add button</button>

点击会调用 button.js 文件中的这个函数并创建一个按钮

$(function(){
    var max_button      = 100; //maximum input boxes allowed
    var wrapper         = $(".light_ponte"); //button wrapper
    var add_button      = $(".add_button"); //Add button on ID

    var i = 1;
    var x = 1; //initlal button count

    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();

        if(x < max_button){ //max button create
            x++; //button increment
            i++;

            $(wrapper).append(' `<div class="checkbut"> <li> <input class="box" type="text" name="mytext" id="mytext" maxlength="15"> <label class="checkboxControl"> <input type="checkbox" value="i" /> <div>OI</div><b></b> <span class="indicator"></span> </label> <a href="#" class="remove_button">X</a> </li> </div>`'); //add button

        }
    });
});

这个按钮，但是它必须创建 index.html。也就是说，通过单击文件 button.html 中的添加按钮，会在文件 index.html 中创建一个按钮。

有办法吗？

【问题讨论】：

你想说什么？
那么 index.html 在哪里？看不出与您的代码有任何关系？
仅供参考，您不需要这样做：var add_button = $(".add_button"); 您已经使用 add_button 变量引用了一次 jQuery，您不需要再次将其传递给 $ 函数。

标签： javascript jquery html button add

【解决方案1】：

如果我正确理解您想要做什么，请查看以下plunker。

使用 jQuery load 方法，您可以像这样加载 html 文件：

$(function() {
  $('body' ).load( "button_template.html" , function() {
    // called after button_template is loaded and added to the body
    button_handler();
  });
});

然后，您需要在 onload 回调中附加按钮的单击处理程序，以便能够单击新加载的按钮。这就是button_handler() 所做的。

【讨论】：

【解决方案2】：

在文件 index.html 中有一个主屏幕，有几个 div。屏幕上有设置按钮。当我点击设置时，我移动到文件 button.html ，其中我有 "add_button" 。当我点击“add_button”时，必须在特定的 div 中生成一个按钮，该 div 位于 index.html 中。

【讨论】：