【问题标题】:after searching button not working in php and jquery ajax搜索按钮后在 php 和 jquery ajax 中不起作用
【发布时间】:2017-05-07 20:07:20
【问题描述】:

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

但搜索结果删除按钮无法正常工作。没有错误。当我单击搜索时,结果删除按钮没有发生。帮我解决这个问题。我的代码如下。原始表删除按钮类是“mybutton”。搜索到的按钮类是“mybutton21”。谢谢。

    <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>

删除公司代码.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
}
?>

【问题讨论】:

  • @JeremyE。我也通过编辑添加该页面。
  • 问题似乎是你在按钮存在之前为 mybutton21 调用了你的函数(在点击时绑定它),所以这个函数永远不会附加到按钮上。
  • @JeremyE。那么我应该怎么做才能解决这个问题。我是 php 新手。
  • 这是一个 JS 问题,而不是 PHP 问题。您需要将 mybutton21 的函数调用移动到 searchrmvcom 的成功函数中。我会写一个答案
  • 对不起,我的回答有误,不要加$(".myButton21").click(myFunction()),加$(".myButton21").click(myFunction)。第一个调用该函数,第二个只是引用它,因此单击时将调用它。我会更新我的答案。让我知道这是否有效

标签: php jquery mysql ajax


【解决方案1】:

问题

“.myButton21”的此事件侦听器在创建按钮之前运行。因此,函数永远不会绑定到按钮上。

解决方案

打开这个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);
        }
    });
});

发布

让我知道这是否可行,或者我是否需要提出其他解决方案。

【讨论】:

  • 这不成功,伙计。你能说我其他方式吗
  • @DanithKumarasinghe 我同意了
【解决方案2】:

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

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

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

替换

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

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

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

【讨论】:

  • 队友你能说我应该在我的代码中哪里使用这个代码。因为我是 php 和 Jquery 的新手
  • 把它代替$(".myButton").click(function () {。抱歉,我认为这很清楚。
  • 抱歉,我意识到我定位错误的按钮,应该是 myButton21。我看到您现在已经接受了另一个答案,但我个人认为这更简洁,并且需要对代码进行更少的更改。
猜你喜欢
  • 1970-01-01
  • 2019-03-08
  • 1970-01-01
  • 2016-05-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-08-19
  • 1970-01-01
相关资源
最近更新 更多