[英]Onclick event doesn't work after AJAX in JQuery issue
This is the Jquery code: 这是Jquery代码:
$("#save").on ('click', function(){ // save new person
var new_name = $("#name").val();
var new_age = $("#age").val();
var formData = { name : new_name, age : new_age };
$.ajax({
url : "ajax.php",
type: "POST",
data : formData,
success: function(data, textStatus, jqXHR){
get_old_html = $("#result_json").html(); // getting current html data
var array = JSON.parse(data); // getting the JSON
var html = "";
for (var i = 0 ; i < array.length; i++){
var split = array[i].split("||");
html = html + "<tr><td>"+ split[1] +"</td><td>"+ split[2] +"</td><td><center><a href ='#' class ='delete_person' id ='"+ split[0] +"'>X</a></center></td></tr>"; // create the new html with the new item
}
$("#result_json").html(html + get_old_html); // add the new html and the content of it
$("#add_new_person").hide();
$("#add_person").show();
//mesaj de confirmare
},
error: function (jqXHR, textStatus, errorThrown){
console.log(errorThrown);
}
});
});
$(".delete_person").on('click',function(){ //delete person
id = $(this).attr("id");
var formData = { id : id };
$.ajax({
url : "ajax.php",
type: "POST",
data : formData,
success: function(data, textStatus, jqXHR){
var remove = JSON.parse(data); // getting the JSON
if (remove == "success"){
$("#"+id).closest("tr").remove();
}
},
error: function (jqXHR, textStatus, errorThrown){
console.log(errorThrown);
}
});
});
The fact is then when i save a new person and after that I want to delete that person, the onclick event on the class "delete_person" does not work. 事实是,当我保存一个新人,然后要删除该人时,类“ delete_person”上的onclick事件不起作用。 But when I refreshed the page it works.
但是,当我刷新页面时,它可以工作。 What should I do ?
我该怎么办 ? and all of it is included in
$( document ).ready(function() { });
并且所有这些都包含在
$( document ).ready(function() { });
.delete-person
is an element that is dynamically added to the DOM after the AJAX call has been made. .delete-person
是在进行 AJAX调用后动态添加到DOM中的元素。 Since your jQuery script runs upon DOMready (when .delete-person
is not present during runtime), the click event would not be bound to the element. 由于您的jQuery脚本是在DOMready上运行的(当运行时
.delete-person
不存在时),因此click事件不会绑定到该元素。
The line $('.delete-person').on('click', function() { ... });
行
$('.delete-person').on('click', function() { ... });
is functionally identical to $('.delete-person').click(function() { ... });
在功能上与
$('.delete-person').click(function() { ... });
. 。 The gist is that you are attaching the click event handler to the element
.delete-person
, which is not present in the DOM at runtime. 要点是要将click事件处理程序附加到元素
.delete-person
,该元素在运行时不存在于DOM中。
Instead, listen to the click event originating from .delete-person
that is bubbling up to the document
object instead: 相反,请监听源自
.delete-person
的click事件,该事件正在冒泡至document
对象:
$(document).on('click', '.delete-person', function() {
// Do stuff here to delete person
});
What the above code does differently is that you are listening for the click even on the document
object, but verifying that the click event originated from a child element that has a class of .delete-person
. 上面的代码的不同之处在于,即使在
document
对象上,您也在侦听单击,但是验证click事件是否源自具有.delete-person
类的子元素。 Since the click event will always bubble to the document
regardless of whether the object is present or absent during runtime, you will be able to delete the person this way ;) 由于单击事件将始终冒泡到
document
而不管对象在运行时是否存在,因此您可以通过这种方式删除人员;)
make sure about response data and use 确保响应数据和使用
$(this).closest("tr").remove();
or try: 或尝试:
$(".delete_person").on('click',function(){
var element = $(this);
then 然后
$(element).closest("tr").remove();
i think you should just add a native javascript function like this 我认为您应该只添加一个本机javascript函数
for (var i = 0 ; i < array.length; i++){
var split = array[i].split("||");
html = html + "<td><a href='#' onlick='deletePerson("+split[1]+")'>Delete</a></td>" // create the new html with the new item
}
then outsude your $(document) 然后超过您的$(document)
function deletePerson(id){
var person_id = id ;
//ajax code here
}
this is what I do whenever i have a dynamic table that has a remove function using jquery 每当我有一个具有使用jquery的删除功能的动态表时,这就是我要做的
It is because the element doesn't exist in the document. 这是因为该元素在文档中不存在。 You need to use
您需要使用
$(document).on("click", "selector", function(){do something});
Hope this helps :) 希望这可以帮助 :)
Happy Learning :) 快乐学习:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.