Question

我创建了从php移除DB中的一些项目。我也使用了搜索功能。搜索功能机制是当我搜索某些内容时，显示现有的表隐藏和搜索详细信息。搜索和原始表中有一个名为remove的按钮。原始表格按钮在ajax中正常工作。

但搜索结果删除按钮无法正常工作。没有错误。当我单击搜索时，结果删除按钮不会发生。帮我解决这个问题。我的代码如下。原始表格删除按钮类是＆＃39; mybutton＆＃39;。搜索按钮类是＆＃39; mybutton21＆＃39;。谢谢。

    <form action="../PHP/searchrmvcom.php" method="post">
                    <div class="search hidden-xs hidden-sm">
                        <input type="text" placeholder="Search" id="search" name="search">
                    </div>
                    <div>
                        <input type="button" value="Search" id="searchrmvcom" name="searchrmvcom">
                        <script>
                            $("#searchrmvcom").click(function () {
                                var comname=$('#search').val();
                                $.ajax({
                                    type:"post",
                                    url:"../PHP/searchrmvcom.php",
                                    data:{comname:comname},
                                    success:function (data3) {
                                        $('#rmvcomdiv').hide();
                                        $('#ela').html(data3)
                                    }
                                });
                            });
                        </script>
                    </div>
                    </form>
                </div>
                <div class="col-md-5">
                    <div class="header-rightside">
                        <ul class="list-inline header-top pull-right">
                            <li class="hidden-xs"><a href="#" class="add-project" data-toggle="modal" data-target="#add_project">Change Password</a></li>
                        </ul>
                    </div>
                </div>
            </header>
        </div>
        <div class="user-dashboard">
            <h1>Comapny Remove</h1>
            <div class="row">
                <!-- code here -->
                <div class="col-md-10 col-md-offset-1">


                    <div class="panel panel-default panel-table">

                        <div class="panel-heading">
                            <div class="row">

                                <div class="col col-xs-6">
                                    <h3 class="panel-title">Company Removal</h3>
                                </div>

                            </div>
                        </div>

                        <div id="ela"></div>
                        <div class="panel-body" id="rmvcomdiv" name="rmvcomdiv">
                            <table class="table table-striped table-bordered table-list">
                                <thead>

                                <tr>
                                    <th>Action</th>
                                    <th>ID</th>
                                    <th>Registration number</th>
                                    <th>Company Name</th>
                                    <th>Email</th>
                                </tr>
                                </thead>
                                <tbody>

                                <?php
                                include('../PHP/dbconnection.php');
                                if (mysqli_connect_errno()) {
                                    echo "Failed to connect to MySQL: " . mysqli_connect_error();
                                }
                                $sql = "";

                                $sql = "select * from company where activation_code=1";

                                $res = mysqli_query($conn, $sql);

                                while ($row = mysqli_fetch_assoc($res)):

                                    ?>

                                    <tr>
                                        <td align="center"><button type="submit" class="btn btn-default myButton" value="<?php echo $row['companyid']; ?>" id="accept" name="accept">Remove</button></td>
                                        <td><?php echo $row['companyid']; ?></td>
                                        <td><?php echo $row['government_reg_no']; ?></td>
                                        <td><?php echo $row['company_name']; ?></td>
                                        <td><?php echo $row['email']; ?></td>
                                    </tr>

                                    <?php
                                endwhile
                                ?>

                                </tbody>
                            </table>

                        </div>

                    </div>

                </div>


            </div>
        </div>
        <script>
            $(".myButton").click(function () {
                var company_id = $(this).val();
                $.ajax({
                    type:"POST",
                    url:"../PHP/deletecompanycode.php",
                    data:{comid: company_id},
                    success:function (data) {
                        alert(data);
                        location.reload(true);
                    }

                });
            });

        </script>

        <script>
            $(".myButton21").click(function () {
                var company_id2 = $(this).val();
                $.ajax({
                    type:"POST",
                    url:"../PHP/deletecompanycode.php",
                    data:{comid: company_id2},
                    success:function (data2) {
                        alert(data2);
                        location.reload(true);
                    }

                });
            });

        </script>

deletecompanycode.php

    <?php
    include('dbconnection.php');
    $comid=$_POST['comid'];
    if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $sql2="select * from company where companyid='$comid'";
    $res2 = mysqli_query($conn, $sql2);
    $row2 = mysqli_fetch_assoc($res2);

    $sql3="delete from login where 
    username='".$row2['government_reg_no']."'";
    $sql="delete from company where companyid='$comid'";
    $sql4="delete from vacancy where companyid='$comid'";

    $conn->query($sql3);
    if ($conn->query($sql3) === TRUE && $conn->query($sql) === TRUE && $conn->query($sql4)===TRUE ) {
    echo 'Successfully Removed';
    }
    else{
    echo 'Occured Error..Try Again';
    }
    ?>

searchrmvcom.php

    <?php
    session_start();
    error_reporting(E_ALL);
    ini_set('display_errors', 1);
    require('../PHP/dbconnection.php');
    $sql="select * from company where company_name like '%".$_POST["comname"]."%' and activation_code=1";
    $res=mysqli_query($conn,$sql);
    if(mysqli_num_rows($res)>0) {
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-striped table-bordered table-list">
    <thead>

    <tr>
        <th>Action</th>
        <th>ID</th>
        <th>Registration number</th>
        <th>Company Name</th>
        <th>Email</th>
    </tr>
    </thead>
    <tbody>
<?php
while ($row = mysqli_fetch_assoc($res)) {
    ?>
        <tr>
            <td align="center"><button type="submit" class="btn btn-default myButton21" value="<?php echo $row['companyid']; ?>" id="accept" name="accept">Remove</button></td>
            <td><?php echo $row['companyid']; ?></td>
            <td><?php echo $row['government_reg_no']; ?></td>
            <td><?php echo $row['company_name']; ?></td>
            <td><?php echo $row['email']; ?></td>
        </tr>
    <?php
}
?>
    </tbody>
</table>
<?php
}
?>

Answer 1

问题

此＆＃34; .myButton21＆＃34;的事件监听器在创建按钮之前运行。因此，该函数永远不会绑定到按钮。

解决方案

转此javascript：

$(".myButton21").click(function () {
    var company_id2 = $(this).val();
    $.ajax({
        type:"POST",
        url:"../PHP/deletecompanycode.php",
        data:{comid: company_id2},
        success:function (data2) {
            alert(data2);
            location.reload(true);
        }
    });
});

在下面，将myButton21所需的onclick函数保存为稍后可以调用的变量，而不是现在绑定它（在同一个位置就可以了）：

var myFunction = function() {
    var company_id2 = $(this).val();
    $.ajax({
        type:"POST",
        url:"../PHP/deletecompanycode.php",
        data:{comid: company_id2},
        success:function (data2) {
            alert(data2);
            location.reload(true);
        }
    });
}

然后转过来：

$("#searchrmvcom").click(function () {
    var comname=$('#search').val();
    $.ajax({
        type:"post",
        url:"../PHP/searchrmvcom.php",
        data:{comname:comname},
        success:function (data3) {
            $('#rmvcomdiv').hide();
            $('#ela').html(data3)
        }
    });
});

在此之后，在创建按钮后，在点击时绑定myButton21的函数：

$("#searchrmvcom").click(function () {
    var comname=$('#search').val();
    $.ajax({
        type:"post",
        url:"../PHP/searchrmvcom.php",
        data:{comname:comname},
        success:function (data3) {
            $('#rmvcomdiv').hide();
            $('#ela').html(data3);
            $(".myButton21").click(myFunction);
        }
    });
});

发布

让我知道这是否有效，或者我是否需要提出其他解决方案。

Answer 2

问题是当页面加载时$(".myButton21").click(function () {运行。它找到具有类“myButton”的任何元素，并将click事件绑定到它们。

当你的ajax运行时，它会破坏这些按钮，从而破坏绑定到它们的事件。它用全新的元素替换它们，这些元素恰好具有相同的类，但是绑定事件处理程序的代码不再运行。

最简单的解决方案是使用委派事件。使用这种技术，您可以将事件绑定到DOM上方的元素，该元素在运行ajax时不会被破坏。然后，您告诉它将实际事件委托给“myButton”类。这可确保具有“myButton”类的所有元素都具有click事件，无论它们是否在首次加载页面时都存在：

替换

$(".myButton21").click(function () {

与

$("#ela").on("click", ".myButton21", function () {

有关详细信息，请参阅“直接和委派事件”部分下的http://api.jquery.com/on/

搜索按钮后无法在php和jquery ajax中工作

2 个答案:

问题

解决方案

发布