Question

我将项目（文章）附加到包含原始现有文章的内容，每篇文章都有一个用于删除，编辑，打开的按钮。我用jquery＆amp;阿贾克斯。我希望这些附加文章的按钮能够将它们的每个值传递给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);
    }
}

Answer 1

我建议您以简单的方式进行操作，您可以使用实时表更新策略，您可以直接从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，下载文件并使用以便更好地理解。

Answer 2

使用$(document).on('<event>', '<selector>', function() {});在脚本init之后创建的dom元素上创建可用事件。

JQuery＆amp; PHP：如何将附加的按钮值传递给jquery？可能吗？

2 个答案: