我正在将项目(文章)附加到包含一些原来存在的文章的内容中，每篇文章都有一个用于删除、编辑、打开的按钮。我使用 jquery 和 ajax。 我希望这些附加文章的按钮能够将它们的每个值传递给 jquery click 函数，并在那里生成所有逻辑(与原始文章的按钮相同的方式)。 可以这样做吗？
<!DOCTYPE html>
<html>
<head>
<title>Infinite Software Blog</title>
<meta name="viewport" content="width=device-width, scale=1.0">
<script type="text/javascript" src="/blog/jquery/jquery-3.2.0.min.js"></script>
<script>
$(document).ready(function () {
$('.del_btn').click(function () {
var clickBtnValue = $(this).val();
var ajaxurl = '/blog/helpers/delete_post.php',
data = {'action': clickBtnValue};
$.post(ajaxurl, data, function () {
alert("Post was successfully deleted");
});
});
$('.edit_btn').click(function () {
var clickBtnValue = $(this).val();
console.log(clickBtnValue);
var ajaxurl = '/blog/edit_post.php',
data = {'action': clickBtnValue};
$.post(ajaxurl, data, function () {
window.location.assign("/blog/helpers/updatePost.php");
});
});
$('.post_content_btn').click(function () {
var clickBtnValue = $(this).val();
var ajaxurl = '/blog/view/post.php',
data = {'action': clickBtnValue};
$.post(ajaxurl, data, function () {
window.location.assign("/blog/post.php");
});
});
$('.more_posts_btn').click(function () {
var clickBtnValue = $(this).val();
var ajaxurl = '/blog/helpers/show_more_posts.php',
data = {'action': clickBtnValue};
$.post(ajaxurl, data, function (output) {
$(".content").append(output);
});
});
});
</script>
<link rel="stylesheet" href="/blog/styles/style.css" type="text/css"/>
</head>
show_more_post.php
<?php
if (isset($_POST['action'])) {
include($_SERVER['DOCUMENT_ROOT'] . "/blog/model/classes.php");
$post = new posts();
$postsToDisplay = $post->getPostsQty($_POST['action']);
$newRecordsIndex = $_POST['action'];
for ($i = 1; $i <= $postsToDisplay; $i++) {
$record = $post->getPost($newRecordsIndex);
$newRecordsIndex++;
$elementToAdd = '<article class="topContent"><header><h2><a href="#" title="' . $record[1] . '">' .
$record[1] . '</a></h2></header><footer><p class="post-author">Author: ' . $record[2] . '</p>' .
'</footer><content>' . $record[6] . '</content><footer><p class="post-date">Publish date: ' .
$record[3] . '</p>' . '<p class="post-time">Publish time: ' . $record[4] . '</p><form><button type="submit"
title="Delete post"' . ' value="' . $record[0] . '" class="del_btn">Delete post</button><button type="submit"
title="Edit post"' . ' value="' . $record[0] . '" class="edit_btn">Edit post</button><button type="submit"
title="Open post in a new tab" value="' . $record[0] . '" class="post_content_btn">Open Post</button>
</form></footer></article>';
echo($elementToAdd);
}
}
最佳答案
我建议您采用一种简单的方式，您可以使用实时表更新策略，您可以直接从 UI 更新数据并删除或添加。找到下面的代码
$(document).ready(function(){
function load(){
$.ajax({
url:'db.php',
method: 'POST',
success:function(data){
$("#load").html(data);
}
});
};
load();
$(document).on('click', '.bton', function(){
var name= $(this).data("id");
if(confirm("Do you want to delete this row"))
{
$.ajax({
url: 'delete.php',
method: 'POST',
data:{id:name},
success: function(data){
alert(data);
load();
}
});
}
});
$(document).on('click','#add', function(){
var addName= $("#name").text();
var addComp= $("#company").text();
$.ajax({
url:'insert.php',
method:'POST',
data: {name:addName, company:addComp},
success:function(data){
alert(data);
load();
}
});
});
$(document).on('blur','.type', function(){
var editID=$(this).data('id1');
var editName= $(this).text();
alert(editName);
})
});
引用点击here ，下载文件并使用以更好地理解。
关于javascript - JQuery 和 PHP : How to pass appended button value to jquery? 有可能吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43125516/