Javascript 如何克隆/复制保持其功能的元素_Javascript_Jquery

Javascript 如何克隆/复制保持其功能的元素

javascript jquery

Javascript 如何克隆/复制保持其功能的元素,javascript,jquery,Javascript,Jquery,我的问题是我如何克隆，比如说一个计算器元素保持所有的与事件（如add、mul、sub等）的绑定在所有其他复制品。我尝试了很多方法，但都不管用 $("#newCalc").on( 'click' , function(){ $('#calcObj').clone(true , true).insertAfter('#calcObj');}); <script src="Scripts/jquery-2.1.4.js" ty

我的问题是我如何克隆，比如说一个计算器元素保持所有的与事件（如add、mul、sub等）的绑定在所有其他复制品。我尝试了很多方法，但都不管用

            $("#newCalc").on( 'click' , function(){
            $('#calcObj').clone(true , true).insertAfter('#calcObj');});

        <script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>

        <script type="text/javascript">
            var counter = 1;
            $(document).ready(function(){
               $("table").delegate(".pickme", "click", function () {
                   $("tbody").append('<tr><td class="pickme">click me</td><td>Row '+(++counter) +'</td></tr>');
               });
               } );
        </script>
    </head>
    <body>

       <table>
           <tbody>
               <tr><td class="pickme">click me</td><td>Row 1:</td></tr>
           </tbody>
       </table>
    </body>
    </html>

我现在离开的最后一个。但当我加入新的计算时，它会加入旧的计算，所有的计算都一样其他克隆

        <script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>

        <script type="text/javascript">
            var counter = 1;
            $(document).ready(function(){
               $("table").delegate(".pickme", "click", function () {
                   $("tbody").append('<tr><td class="pickme">click me</td><td>Row '+(++counter) +'</td></tr>');
               });
               } );
        </script>
    </head>
    <body>

       <table>
           <tbody>
               <tr><td class="pickme">click me</td><td>Row 1:</td></tr>
           </tbody>
       </table>
    </body>
    </html>

这是我的代码（这是我第一次编写js，请原谅我的错误代码）：

        <script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>

        <script type="text/javascript">
            var counter = 1;
            $(document).ready(function(){
               $("table").delegate(".pickme", "click", function () {
                   $("tbody").append('<tr><td class="pickme">click me</td><td>Row '+(++counter) +'</td></tr>');
               });
               } );
        </script>
    </head>
    <body>

       <table>
           <tbody>
               <tr><td class="pickme">click me</td><td>Row 1:</td></tr>
           </tbody>
       </table>
    </body>
    </html>


$（“#newCalc”）。在（'click'，function（）上{
新计算器（）；}）；
/*用相应的功能绑定事件*/
$（“#清除”）。在（'click'，calculate.clear'）上；
$（“#添加”）。在（'click'，calculate.add'）；
$（“#乘”）。在（'click'，calculate.mul）上；
$（“#减去”）。在（'click'，calculate.sub）上；
$（“#除”）。在（'click'，calculate.div）上；
$（“#设置”）。在（'click'，calculate.settings'）上；
$（“.num”）。在（'click'，function（）{
$（“#输入”）.val（此.value）；
});
$（“#输入”）。在（'keyup'，validateEnumber）上；
});
//var calculate=新计算器（）；
/*让我们只在输入框上写数字0-9*/
函数validateEnumber（）{
if（isNaN（$（“#输入”）.val（））{
警报（“仅限数字！！！重试：）”；
$（“#输入”）.val（“”）；
}
}
函数计算器（）{
var空=“”；
var顺序=计数器；
变量el3_calc=”“+
'' +
'' +
“计算器”+
'' +
'' +
''+
''+
''+
'' +
'' +
'' +
“
”+
'' +
''+
''+
''+
“
”+
''+
''+
''+
''+
“
”+
''+
''+
'' +
'' +
“
”+
'' +
''+
''+
''+
''+
''+
'';
$（“#第三”）。追加（el3#U计算）；
计数器+=1；
this.add=函数（）{
如果（$（“#输入”）.val（）！=空&&$（“#结果”）.val（）==空）{
$（“#结果”）.val（$（“#输入”）.val（））；
}
否则{
$（“#结果”）.val（parseFloat（$（“#输入”）.val（））+parseFloat（$（“#结果”）.val（））；
}
$（“#输入”）.val（空）；
}
this.mul=函数（）{
如果（$（“#输入”）.val（）！=空&&$（“#结果”）.val（）==空）{
$（“#结果”）.val（$（“#输入”）.val（））；
}
否则{
$（“#结果”）.val（parseFloat（$（“#输入”）.val（））*parseFloat（$（“#结果”）.val（））；
}
$（“#输入”）.val（空）；
}
this.div=函数（）{
如果（$（“#输入”）.val（）！=空&&$（“#结果”）.val（）==空）{
$（“#结果”）.val（$（“#输入”）.val（））；
}
否则{
$（“#结果”）.val（parseFloat（$（“#结果”）.val（））/parseFloat（$（“#输入”）.val（））；
}
$（“#输入”）.val（空）；
}
this.sub=函数（）{
如果（$（“#输入”）.val（）！=空&&$（“#结果”）.val（）==空）{
$（“#结果”）.val（$（“#输入”）.val（））；
}
否则{
$（“#结果”）.val（parseFloat（$（“#结果”）.val（））-parseFloat（$（“#输入”）.val（））；
}
$（“#输入”）.val（空）；
}
this.clear=函数（）{
$（“#结果”）.val（空）；
$（“#输入”）.val（空）；
}
}

你不能。但是，在克隆元素时，必须添加新事件。。。。。如果使用$（）.delegate而不是on，则会自动添加事件处理程序。不要使用ID，而是使用类名作为选择器

        <script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>

        <script type="text/javascript">
            var counter = 1;
            $(document).ready(function(){
               $("table").delegate(".pickme", "click", function () {
                   $("tbody").append('<tr><td class="pickme">click me</td><td>Row '+(++counter) +'</td></tr>');
               });
               } );
        </script>
    </head>
    <body>

       <table>
           <tbody>
               <tr><td class="pickme">click me</td><td>Row 1:</td></tr>
           </tbody>
       </table>
    </body>
    </html>

以这种方式放置事件处理程序，这将适用于任何克隆（即使在不克隆的情况下创建id为newCalc的新元素）

$(document).on( 'click', "#newCalc" , function() {

        <script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>

        <script type="text/javascript">
            var counter = 1;
            $(document).ready(function(){
               $("table").delegate(".pickme", "click", function () {
                   $("tbody").append('<tr><td class="pickme">click me</td><td>Row '+(++counter) +'</td></tr>');
               });
               } );
        </script>
    </head>
    <body>

       <table>
           <tbody>
               <tr><td class="pickme">click me</td><td>Row 1:</td></tr>
           </tbody>
       </table>
    </body>
    </html>

注意：正如建议的那样，根据W3C约定，我们不应该有多个具有相同id的元素，为此，请使用一个类

        <script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>

        <script type="text/javascript">
            var counter = 1;
            $(document).ready(function(){
               $("table").delegate(".pickme", "click", function () {
                   $("tbody").append('<tr><td class="pickme">click me</td><td>Row '+(++counter) +'</td></tr>');
               });
               } );
        </script>
    </head>
    <body>

       <table>
           <tbody>
               <tr><td class="pickme">click me</td><td>Row 1:</td></tr>
           </tbody>
       </table>
    </body>
    </html>

编辑

        <script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>

        <script type="text/javascript">
            var counter = 1;
            $(document).ready(function(){
               $("table").delegate(".pickme", "click", function () {
                   $("tbody").append('<tr><td class="pickme">click me</td><td>Row '+(++counter) +'</td></tr>');
               });
               } );
        </script>
    </head>
    <body>

       <table>
           <tbody>
               <tr><td class="pickme">click me</td><td>Row 1:</td></tr>
           </tbody>
       </table>
    </body>
    </html>

我认为您需要正确定义变量calculate。我假设您希望在单击

#newCalc

时定义它。因此，您需要首先在函数外部定义变量（以便其他函数可以访问它）然后在单击按钮时指定值。因此可以如下所示：

var calculate;
$(document).on( 'click', "#newCalc" , function() {
    calculate = new calculator();
});

        <script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>

        <script type="text/javascript">
            var counter = 1;
            $(document).ready(function(){
               $("table").delegate(".pickme", "click", function () {
                   $("tbody").append('<tr><td class="pickme">click me</td><td>Row '+(++counter) +'</td></tr>');
               });
               } );
        </script>
    </head>
    <body>

       <table>
           <tbody>
               <tr><td class="pickme">click me</td><td>Row 1:</td></tr>
           </tbody>
       </table>
    </body>
    </html>

为您的环境调整脚本链接，但这对我有效。

        <script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>

        <script type="text/javascript">
            var counter = 1;
            $(document).ready(function(){
               $("table").delegate(".pickme", "click", function () {
                   $("tbody").append('<tr><td class="pickme">click me</td><td>Row '+(++counter) +'</td></tr>');
               });
               } );
        </script>
    </head>
    <body>

       <table>
           <tbody>
               <tr><td class="pickme">click me</td><td>Row 1:</td></tr>
           </tbody>
       </table>
    </body>
    </html>


var计数器=1；
$（文档）.ready（函数（）{
$（“表”）.delegate（“.pickme”，“click”，函数（）{
$（“tbody”）.append（'click meRow'+（++counter）+''）；
});
} );
单击meRow 1：

这是一个完整的修改版，减少了额外的代码，应该可以使用。只需一个重要的更改，而不是克隆新项，获取一个调用该函数的新计算器，只需使用

append

（计算器函数将返回应该附加到任何div的计算器html

        <script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.js" type="text/javascript"></script>

        <script type="text/javascript">
            var counter = 1;
            $(document).ready(function(){
               $("table").delegate(".pickme", "click", function () {
                   $("tbody").append('<tr><td class="pickme">click me</td><td>Row '+(++counter) +'</td></tr>');
               });
               } );
        </script>
    </head>
    <body>

       <table>
           <tbody>
               <tr><td class="pickme">click me</td><td>Row 1:</td></tr>
           </tbody>
       </table>
    </body>
    </html>

function calculator(){

    var empty = '';
    var order = counter;
    var el3_calc = "" + 
    '<table id="calcObj">' +
    '<th colspan="3">' +
    '<h1 id="calcHeadline"><b>Calculator</b></h1>' +
    '</th>' +
    '<tr>' +
    '<td colspan="3">'+
    '<input type="text" id = "input" class="calcIO" value="">'+
    '<input type="button" id ="add" value="+">'+
    '<input type="button" id ="multiply" value="x">' +
    '<input type="button" id ="subtract" value="-">' +
    '<input type="button" id ="divide" value="/">' +
    '<input type="text" id="result" readOnly="true" value="" class="calcIO"><br></td>' +
    '</tr>' +
    '<tr>'+
    '<td><input type="button" class ="num" value="1"></td>'+
    '<td><input type="button" class ="num" value="2"></td>'+
    '<td><input type="button" class ="num" value="3"><br></td>'+
    '</tr>'+
    '<tr>'+
    '<td><input type="button" class ="num" value="4"></td>'+
    '<td><input type="button" class ="num" value="5"></td>'+
    '<td><input type="button" class ="num" value="6"><br></td>'+
    '</tr>'+
    '<tr>'+
    '<td><input type="button" class ="num" value="7"></td>' +
    '<td><input type="button" class ="num" value="8"></td>' +
    '<td><input type="button" class ="num" value="9"><br></td>' +
    '</tr>' +
    '<tr>'+
    '<td><input type="button" id="newCalc" value = "AddCalc"></td>'+
    '<td><input type="button" class ="num" value="0"></td>'+
    '<td><input type="button" id="clear" value="Clear"></td>'+
    '</tr>'+
    '</table>';
    el3_calc = $(el3_calc);
    //$("#third").append(el3_calc); //remove this line

    counter += 1;
    var inputDiv = el3_calc.find("#input");
    var resultDiv = el3_calc.find("#result");

    this.calc = function(operator){
        var inputVal = inputDiv.val();
        var resultVal = resultDiv.val();
        if(inputVal != empty && resultVal == empty){
            resultDiv.val(inputVal);
       }
        else{
           var newVal;
           resultVal = parseFloat(resultVal);
           inputVal = parseFloat(inputVal);
           switch(operator) {
              case '+':
                newVal = resultVal +  inputVal;
                break;
              case '-':
                newVal = resultVal -  inputVal;
                break;
              case '*':
                newVal = resultVal *  inputVal;
                break;
              case '/':
                newVal = resultVal /  inputVal;
                break;
              default:
                break;
           }
           resultDiv.val(newVal);
       }

       inputDiv.val(empty);
    }

    this.clear = function() {
        inputDiv.val(empty);
        resultDiv.val(empty);
    }
    var calculate = this;
    el3_calc.find("#clear").on('click', calculate.clear);
    el3_calc.find("#add").on('click', function() {calculate.calc('+');});
    el3_calc.find("#multiply").on('click', function() {calculate.calc('*');});
    el3_calc.find("#subtract").on('click' , function() {calculate.calc('-');});
    el3_calc.find("#divide").on('click' , function() {calculate.calc('/');});
    el3_calc.find("#settings").on('click', calculate.settings);
    el3_calc.find(".num").on('click', function(){ 
         inputDiv.val(this.value);
    });
    el3_calc.find("#input").on('keyup', validateNumber);
    return el3_calc;
}

$(document).on( 'click', "#newCalc" , function() {
    mycal = new calculator();
    $('#third').append(mycal);
});

函数计算器（）{
var空=“”；
var顺序=计数器；
变量el3_calc=”“+
'' +
'' +
“计算器”+
'' +
'' +
''+
''+
''+
'' +
'' +
'' +
“
”+
'' +
''+
''+
''+
“
”+
''+
''+
''+
''+
“
”+
''+
''+
'' +
'' +
“
”+
'' +
''+
''+
''+
''+
''+
'';
el3_计算=$（el3_计算）；
//$（“#第三”）.append（el3_calc）；//删除此行
计数器+=1；
var inputDiv=el3_计算查找（“#输入”）；
var resultDiv=el3_计算结果（“结果”）；
this.calc=函数（运算符）{
var inputVal=inputDiv.val（）；
var resultVal=resultDiv.val（）；
if（inputVal！=空&&resultVal==空）{
结果v.val（inputVal）；
}
否则{
var newVal；
resultVal=parseFloat（resultVal）；
inputVal=parseFloat（inputVal）；
开关（操作员）{
格“+”：
newVal=resultVal+inputVal；
打破
案例'-'：
newVal=resultVal-inputVal；
打破
案例“*”：
newVal=resultVal*inputVal；
打破
案例“/”：
newVal=resultVal/inputVal；
打破
违约：
打破
}