Question

我在一个项目中遇到问题，然后：

我有一个代码php，它使用mysql数据生成一个活动表。在右侧，我有一个按钮，该按钮执行php脚本以将电子邮件发送到表中相应行中写入的地址。如果我的搜索结果有多于1行，则显示行，但如果我单击要发送电子邮件的人所对应的按钮，则js脚本将为表中显示的每个人显示警报（正确）

此处是php代码：

$output = '';

if(isset($_POST["query"]))
{
    $search = mysqli_real_escape_string($connect, $_POST["query"]);
    $query = "
    SELECT * FROM mytable 
    WHERE Last_Name LIKE '%".$search."%'
    OR First_Name LIKE '%".$search."%'
    OR Number LIKE '%".$search."%' 
    OR Gmail LIKE '%".$search."%' 
    OR Year LIKE '%".$search."%'
    OR Class LIKE '%".$search."%'
    OR Password LIKE '%".$search."%'
    OR School LIKE '%".$search."%'
    ORDER BY Last_Name LIMIT 200";
}
else
{
    $query = "
    SELECT * FROM mytable ORDER BY Last_Name limit 0";
}

$result = mysqli_query($connect, $query);
$rowcount=mysqli_num_rows($result);

if(mysqli_num_rows($result) > 0)
{
    $output .= '<div class="table-responsive well-lg">
                    <table class="table table-hover table-striped table-bordered">
                        <tr>
                            <th class="text-center">Last Name</th>
                            <th class="text-center">First Name</th>
                            <th class="text-center">Student Nr.</th>
                            <th class="text-center">School Email</th>
                            <th class="text-center">Year</th>
                            <th class="text-center">Class</th>
                            <th class="text-center">Password</th>
                            <!--<th class="text-center">Doc.</th>-->
                            <th class="text-center">E-Mail</th>


                        </tr>';
    while($row = mysqli_fetch_array($result))
    {
        $output .= '
            <tr>
                <td class="text-center">'.utf8_encode($row["Last_Name"]).'</td>
                <td class="text-center">'.utf8_encode($row["First_Name"]).'</td>
                <td class="text-center">'.utf8_encode($row["Number"]).'</td>
                <td class="text-center">'.utf8_encode($row["Gmail"]).'</td>
                <td class="text-center">'.utf8_encode($row["Year"]).'</td>
                <td class="text-center">'.utf8_encode($row["Class"]).'</td>
                <td class="text-center">'.utf8_encode($row["Password"]).'</td>



                <!--<td class="text-center" style="width: 60px"><a href="document.php?firstname='.utf8_encode($row["First_Name"]).'&amp;lastname='.utf8_encode($row["Last_Name"]).'&amp;number='.$row["Number"].'&amp;gmail='.$row["Gmail"].'&amp;password='.$row["Password"].'"><img src="images/document.png" width=18px"></a>
                </td>-->
                <td class="text-center" style="width: 60px">
<a class="ajax confirmation" href="mail_'.$row["School"].'.php?firstname='.utf8_encode($row["First_Name"]).'&amp;lastname='.utf8_encode($row["Last_Name"]).'&amp;number='.$row["Number"].'&amp;gmail='.$row["Gmail"].'&amp;password='.$row["Password"].'"><img src="images/gmail_icon.png" width=24px"></a>
                </td>



<script type="text/javascript">
    $(\'.confirmation\').on(\'click\', function () {
        return confirm(\'You are sending the password to ' .$row["Gmail"]. '. Are you sure?\');
    });
</script>






            </tr>


        ';
    }
    echo $output;

在livetable中管理输出的js：

$(document).ready(function(){
    load_data();
    function load_data(query)
    {
        $.ajax({
            url:"fetch.php",
            method:"post",
            data:{query:query},
            success:function(data)
            {
                $('#result').html(data);
            }
        });
    }

    $('#search_text').keyup(function(){
        var search = $(this).val();
        if(search != '')
        {
            load_data(search);
        }
        else
        {
            load_data();            
        }
    });

这是管理警报的代码：

<script>
    $(document).on("click", ".ajax", function(e){
        e.preventDefault();
        var href = $(this).attr('href');
        $.ajax({
            type: "GET",
            dataType : "html",
            url: href,
            success: function (data){
                alert(data);
            }
        });
    });

</script>

如何避免在显示的每一行都显示警报，而只允许我单击的行显示警报？

请帮助我... 谢谢大家...

Answer 1

你好Pablo，欢迎您来Stack Overflow！

更新后的答案：

在您的代码中发现错误：

while($row = mysqli_fetch_array($result))
{
    $output .= '
    ...
    <script type="text/javascript">
      $(\'.confirmation\').on(\'click\', function () {
        return confirm(\'You are sending the password to ' .$row["Gmail"]. '. Are you sure?\');
      });
    </script>
    ...
'
}

您可以在循环中定义它，从而创建多个事件侦听器（在您的测试中，创建了2个条目，并创建了2个侦听器）。弹出窗口中显示的邮件地址基于当前的$row['Gmail']条目，这就是为什么您看到两个不同的邮件地址的原因。脚本块的位置也是无效的，因为它当前位于结束</td>和结束</tr>标签之间。

修改代码以具有一个侦听器，并提供确认对话框中显示的邮件地址作为“ data-” 属性。

更改了PHP代码：

<td class="text-center" style="width: 60px">
  <a class="ajax confirmation" 
    data-mail='.$row["Gmail"].' 
    href="mail_'.$row["School"].'.php?firstname='.utf8_encode($row["First_Name"]).'&amp;lastname='.utf8_encode($row["Last_Name"]).'&amp;number='.$row["Number"].'&amp;gmail='.$row["Gmail"].'&amp;password='
    .$row["Password"].'">
    <img src="images/gmail_icon.png" width=24px">
  </a>
</td>

JS代码：

完全删除循环中定义的现有侦听器。该监听器将管理您的警报：

$(document).on("click", ".confirmation", function(e){
    e.preventDefault();
    var mail= $(this).data("mail");
    if (confirm("You are sending the password to " + mail +". Are you sure?")) {
        var href = $(this).attr('href');
        $.ajax({
            type: "GET",
            dataType : "html",
            url: href,
            success: function (data){
                alert(data);
            }
        });

    }
});

更新2：

正如您所指出的，有一些原因导致代码中的循环不断显示确认信息。我看不出是什么原因造成的，但这是另一个应该很简单的选择：

在您的PHP 中，将其更改为：

<td class="text-center" style="width: 60px">
  <a onclick="sendMail(\''.$row["Gmail"].'\',\'mail_'.$row["School"].'.php?firstname='.utf8_encode($row["First_Name"]).'&amp;lastname='.utf8_encode($row["Last_Name"]).'&amp;number='.$row["Number"].
    '&amp;gmail='.$row["Gmail"].'&amp;password='.$row["Password"].'\')">
    <img src="images/gmail_icon.png" width="24px">
  </a>
</td>

与此 JS功能一起使用：

function sendMail(mail, href)
{
    if (confirm("You are sending the password to " + mail +". Are you sure?")) {
        $.ajax({
            type: "GET",
            dataType : "html",
            url: href,
            success: function (data){
                alert(data);
            }
        });

    }
}

Answer 2

这是因为您具有相同的类.ajax，并且每个类都有一个href属性。因此，如果有20个原始.ajax将命中20次。因此请有所不同以获得准确的结果。我为此使用函数。请尝试以下代码，如果这不起作用，请回复我。

<td class="text-center" style="width: 60px">
<a class="ajax confirmation" href="mail_'.$row["School"].'.php?firstname='.utf8_encode($row["First_Name"]).'&amp;lastname='.utf8_encode($row["Last_Name"]).'&amp;number='.$row["Number"].'&amp;gmail='.$row["Gmail"].'&amp;password='.$row["Password"].'"><img src="images/gmail_icon.png" width=24px" onClick="buttonClick(this.href)"></a>
</td>

<script>
buttonClick(href){
    e.preventDefault();
    $.ajax({
        type: "GET",
        dataType : "html",
        url: href,
        success: function (data){
            alert(data);
        }
    });
}
</script>

在活动表格php中反复出现JS警报

2 个答案: