如何使新功能工作

Question

我想知道如何在添加新文本和删除按钮后使功能。我添加了新行，新功能（deleteRow和resizeInput）不起作用。

$('#addNew').click(function(event){
	newRow();
});
	
$('.deleteButton').click(function(){
	deleteRow($(this));
});

function newRow(){	
	var numFilas = $('#nuevasTareas tr').length;
	$('#nuevasTareas').append('<tr><td><input type="text" id="titulo'+numFilas+'" /></td><td><input type="text" id="descripcion'+numFilas+'" /></td><td><input type = "checkbox"></input></td><td><a class="deleteButton" id="eliminar" title="Eliminar Tarea">X Eliminar</a></td></tr>');
	}

function deleteRow(thisButton){
	thisButton.parent().parent().remove();
}

function resizeInput() {
    $(this).attr('size', $(this).val().length);
}
$('input[type="text"]')
   .keyup(resizeInput)
    .each(resizeInput);

Answer 1

在这种情况下，您必须使用event delegation。使用.click绑定事件时，它将仅在绑定时可用的DOM元素上绑定事件。

相反，您必须使用event delegation jQuery api .on()。在这里，您将事件绑定到父元素并将其委托给子元素。

$(document).on("click", '#addNew', function(event){
    newRow();
});

$(document).on("click", '.deleteButton', function(){
    deleteRow($(this));
});

由于您尚未共享HTML，因此我使用document作为父元素。相反，您甚至可以在您的案例中仅使用table，因为它将是tr的父级。