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

Question

我的问题是我如何克隆，让我们说一个计算器元素保持所有 绑定到add，mul，sub等所有其他事件 重复。我尝试了很多方法，没有任何作用。

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

我现在离开的最后一个。 但是当我在新的计算中添加时，它会添加旧的计算机，与所有计算机相同 其他克隆。

这是我的代码（这是我第一次编程js，所以原谅我的编码错误）：

＆＃13;

＆＃13;

					
				$("#newCalc").on( 'click' , function(){
				new calculator();});
				
					
				/* Bind event with the corresponding functionality. */
				$("#clear").on('click', calculate.clear);
				$("#add").on('click', calculate.add);
				$("#multiply").on('click', calculate.mul);
				$("#subtract").on('click' , calculate.sub);
				$("#divide").on('click' , calculate.div);
				$("#settings").on('click', calculate.settings);
				$(".num").on('click', function(){ 
					$("#input").val(this.value);
				});
				$("#input").on('keyup', validateNumber);
    });
	
	
//var calculate = new calculator();

/* Let's only digits, 0-9, to be written on input box. */
function validateNumber() {

	if (isNaN($("#input").val())) {
		  alert("Only numbers!!! try again :)");
		  $("#input").val("");
	}
}


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>';
	
	$("#third").append(el3_calc);



	counter += 1;
	
	this.add = function(){
		if($("#input").val() != empty && $("#result").val() == empty){
			
			$("#result").val($("#input").val());
		}
		else{
			$("#result").val(parseFloat($("#input").val()) + parseFloat($("#result").val()));
		}
		
		$("#input").val(empty);
	}
	
	this.mul = function() {
		if($("#input").val() != empty && $("#result").val() == empty){
			
			$("#result").val($("#input").val());
		}
		else{
			$("#result").val(parseFloat($("#input").val()) * parseFloat($("#result").val()));
		}
		
		$("#input").val(empty);
	}
	
	this.div = function(){
		if($("#input").val() != empty && $("#result").val() == empty){
			
		$("#result").val($("#input").val());
		}
		else{
			$("#result").val(parseFloat($("#result").val()) / parseFloat($("#input").val()));
		}
		
		$("#input").val(empty);
	}
	
	this.sub = function(){
		if($("#input").val() != empty && $("#result").val() == empty){
			
			$("#result").val($("#input").val());
		}
		else{
			$("#result").val(parseFloat($("#result").val()) - parseFloat($("#input").val()));
		}
		
		$("#input").val(empty);
	}

	this.clear = function() {
		$("#result").val(empty);
		$("#input").val(empty);
	}

}

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

http://api.jquery.com/delegate/

Answer 2

以这种方式放置事件处理程序，这将适用于任何克隆（即使您使用id newCalc创建新元素而不进行克隆。

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

  

注意：作为推荐，根据W3C惯例，我们不应该有多个具有相同ID的元素，而是使用类来代替这些目的。

修改

我认为您需要正确定义变量计算。我假设你想在点击#newCalc时定义它。因此，您需要首先在函数外部定义变量（以便可以从其调用的其他函数访问它），然后在单击按钮时分配值。所以它可以是这样的：

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

Answer 3

调整适合您环境的脚本链接，但这对我有用                                                                            

<ImageButton
    android:src="@drawable/tri1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageButtonTri"
    android:layout_marginLeft="75dp"
    />

Answer 4

这是完整的修改版，减少了额外的代码，应该可以使用。只有一个重要的变化，而不是克隆新项目，得到一个新的计算器调用函数，只需使用append（计算器函数将返回计算器html，你应该附加到任何div。

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