Удалить дочерний элемент с помощью связанного с ним ключа

Question

Так что у меня есть следующий код, однако, когда нажата кнопка удаления, дочерний элемент не удаляется. Кажется, что функция click никогда не запускается, потому что я попытался добавить оператор предупреждения, и он не работает.

<table id="removeTable" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp"> 
<thead> 
<tr> 
<th>Employee ID</th> 
<th>Name</th> 
<th>Email</th> 
<th>Remove</th> 
</tr> 
</thead> 
<tbody id="table_body"></tbody> 
</table> 

var rootRef = firebase.database().ref().child("Employees"); 

rootRef.on('child_added', snap => { 
    var id = snap.child("ID").val(); 
    var key = snap.key; 
    var name = snap.child("Name").val(); 
    var email = snap.child("Email").val(); 
    var btn = "<button key='"+ key +"' class='removeEmployee mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'>Remove</button>"; 

    $("#table_body").append("<tr id='"+key+"'><td>" + id + "</td><td>" + name + "</td> <td>" + email + 
          "</td><td><button>" + btn +"</button></td></tr>"); 

}); 

$("#removeEmployee").click(
    function(){ 
    alert(); 
    } 
); 

// now this click handler can be (should be) moved outside 'child_added' callback 
    $(".removeEmployee").click(function(){ // note: using 'removeElement' as class, not as id 
    alert("clicked!"); 
    var key = $(this).attr('key'); 
    var itemToRemove = rootRef.child(key); 
    itemToRemove.remove() 
    .then(function() { // removed from Firebase DB 
    console.log("Remove succeeded.") 
    }) 
    .catch(function(error) { 
    console.log("Remove failed: " + error.message) 
    }); 

    }); 
// keeping this separate so that even if the item is removed by any other means (e.g.- directly from server console) this UI will remain in sync 
rootRef.on('child_removed', function(snap) { 
    var key = snap.key; 
    $('#'+key).remove(); 
}); 

Answer 1

Ваша проблема не имеет ничего общего с firebase.

JQuery автоматически не подключает события кликов для динамически созданного контента; Вы должны добавить эти обработчики кликов вручную. Это лучше всего делать, когда вы создаете новые элементы.

// wrap in a jquery object 
var btn = $("<button key='"+ key +"' class='removeEmployee mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'>Remove</button>"); 

// then add a click event handler to it 
btn.on('click', function() { 
    var key = $(this).attr('key'); 
    alert("clicked! " + key); 
}); 

// then add it to the table 
$("#table_body").append("<tr id='"+key+"'><td>" + id + "</td><td>" + name + "</td> <td>" + email + "</td><td><button>" + btn +"</button></td></tr>"); 

Answer 2

Почему бы вам не использовать метод .on присоединить обработчик, чтобы быть вызвано помощью «документа» и только если кнопка существует?

$(document).on('click', ".removeEmployee", function(){ 
    alert('My text : ' + $(this).text()); 
}); 

(Кстати, вы пытаетесь кнопку, чтобы выбрать с «#», который используется для выбора элемента по идентификатору. Но removeEmployee класс CSS, так что вам нужно использовать «.removeEmployee»)

Вот демонстрация для обработчика, созданного перед элементом:

console.log("Attaching handler"); 
 
setTimeout(function() { 
 
    $(document).on('click', ".removeEmployee", function() { 
 
    alert('My text : ' + $(this).text()); 
 
    }); 
 
    console.log("Creating the button"); 
 
    setTimeout(function() { 
 
    $('#container').append('<button class="removeEmployee">Remove</button>'); 
 
    console.log("Ready for click!") 
 
    }, 1000); 
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"></div>