Tôi đang cố gắng sắp xếp lại mã của mình và làm cho mã không rõ ràng hơn.Chức năng nhấp chuột jQuery vs inline onclick
Chủ yếu, có một liên kết để thực hiện một hành động. Nếu bạn nhấp vào liên kết, hành động được thực hiện thông qua ajax (mã ajax không có trên mã ở đây) và văn bản được thay thế bằng văn bản khác, cung cấp cho người dùng khả năng hoàn tác tác vụ. Nếu người dùng nhấp vào liên kết Hoàn tác, ajax sẽ khôi phục tình huống trước đó và văn bản cung cấp cho người dùng thực hiện tác vụ được hiển thị lại.
Tôi đã tạo một phiên bản đơn giản hơn về sự cố của mình trong một tệp html (mã bên dưới). Có hai đoạn văn. Nếu bạn nhấp vào liên kết của đoạn đầu tiên, sử dụng lệnh gọi onclick nội tuyến, mã hoạt động như mong đợi. Nhưng nếu bạn nhấp vào liên kết của đoạn thứ hai, sử dụng chức năng jQuery onclick, liên kết Hoàn tác không hoạt động và tôi không thể hiểu tại sao.
Bất kỳ trợ giúp nào? Cảm ơn rất nhiều!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$(".add2").click(function(){
var placeId = $(this).parents(".place").attr("id");
$("#" + placeId + " .add2").remove();
$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd2\" href=\"#\">Undo</a>");
return false;
})
$(".undoadd2").click(function(){
var placeId = $(this).parents(".place").attr("id");
$("#" + placeId + " .actions").find("span.added, a.add2").remove();
$("#" + placeId + " .actions").append("<a class='add2' onclick='copyPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>");
return false;
})
});
function addPlace(placeId){
$("#" + placeId + " .add").remove();
$("#" + placeId + " .actions").append("<span class=\"added\">Added!</span> <a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\">Undo</a>");
return false;
}
function undoAddPlace(placeId){
$("#" + placeId + " .actions").find("span.added, a.undoadd").remove();
$("#" + placeId + " .actions").append("<a class='add' onclick='addPlace(\"" + placeId + "\"); return false;' href='#'>Add place</a>");
return false;
}
</script>
</head>
<body id="home">
<div class="place" id="3435910">
<p class="actions"><a href="#" onclick="addPlace('3435910'); return false;" class="add">Add place</a></p>
</div>
<div class="place" id="3435912">
<p class="actions"><a href="#" class="add2">Add place</a></p>
</div>
</body>
</html>
Live sẽ chỉ làm việc nếu chọn là giống hệt nhau. Trong trường hợp này, tôi nghĩ bộ chọn là duy nhất cho mỗi phần tử DOM. – tvanfosson
Cảm ơn @wolfr. Tôi không biết điều này tồn tại. –
Câu trả lời hay. Tôi biết mã js của tôi làm việc, nhưng không thể tìm ra những gì đã xảy ra ... sau khi đọc câu trả lời của bạn, tôi nhận ra rằng tôi đã gắn kết với các thẻ được hiển thị thông qua web proxy asp.net asp.net ... một lần nữa, cảm ơn sự giúp đỡ @Wolfr –