0

目前 jQuery 有点问题。我有一个表，我的目标是有一个删除按钮，当单击它时，它会从 mySQL 后端删除它。我在功能方面没有问题，我的问题是我无法让 jQuery 返回 false，它一直重定向到我在表单标记中指向的 php 脚本。如果您发现代码有问题，请告诉我。

我设置了一个表结构，这只是为了显示从 mysql 查询返回的所有行。也许我没有正确设置表单。

<?php
if (sizeof($rows5) > 0) {
    foreach($rows5 as $row5):
    echo"
<tr class='tableRowClass2'>
<td>{$row5['PackingSlipStarmontID']}</td>
<td>{$row5['fullStarmont']}</td>
<form action='delete/starmont.php' method='post' name='deletestarmontForm' id='deletestarmontForm'>
<td>
    <button id='button3'>Remove</button>
    <input type='hidden' id='PackingSlipStarmontID' name='PackingSlipStarmontID' value='{$row5['PackingSlipStarmontID']}'/>
</td>
</form>
</tr>";
    endforeach;
}
?>

这是假设一旦提交表单就停止页面重定向的jQuery。

$(document).ready( function() {
    $("#button3").click( function() {
        $.post( $("#deletestarmontForm").attr("action"), 
            $("#deletestarmontForm :input").serializeArray(), 
            function(info){
                $("#result4").html(info); 
           });
        });
        $("#deletestarmontForm").submit( function() {
            return false;   
        });
        function clearInput() {
        $("#deletestarmontForm :input").each( function() {
           $(this).val('');
        });
    }
});

所以这段代码在它调用 php 脚本并且 SQL 查询很好的意义上是有效的。问题是它重定向到该 php 页面，而不是在提交时返回 false。

*编辑*** 谢谢大家的帮助。在这和实验之间，我已经解决了这个问题。似乎问题与重复的 ID 有关。我使用的代码与我发布的代码相同，但我没有使用 ID 选择器，而是通过将其更改为类选择器来解决它

4

6 回答 6

4

您不能多次使用同一个 ID。所以，请注意我已将 ID 更改为 Class。

<?php
if (sizeof($rows5) > 0) {
    foreach($rows5 as $row5):
    echo"
<tr class='tableRowClass2'>
<td>{$row5['PackingSlipStarmontID']}</td>
<td>{$row5['fullStarmont']}</td>
<td>
    <button class='button3'>Remove</button>
    <input type='hidden' id='PackingSlipStarmontID' name='PackingSlipStarmontID' value='{$row5['PackingSlipStarmontID']}'/>
</td>
</tr>";
    endforeach;
}
?>

然后，您需要更改 jQuery 代码。您需要防止按钮的默认行为。

$(document).ready( function() {
    $(".button3").click( function(event) {
     event.preventDefault();
     var value = $(this).siblings('input[type=hidden]').val();
     $.post( "/your/path", 
             { value : value }, 
             function(info){ $("#result4").html(info); 
       });
    });
});

表单将由 $.post 提交，但 event.prevenDefault() 将禁止提交表单。

于 2013-10-11T20:20:44.760 回答
1

默认操作是转到您要阻止的表单页面。

$("#button3").click( function(e) {
    e.preventDefault();
    // rest of submit stuffs
});
于 2013-10-11T20:20:51.807 回答
1

你可以试试这个e.preventDefault()

$("#button3").click( function(e) {
    e.preventDefault(); // <-- prevents default action
    // rest of the code
});
于 2013-10-11T20:20:54.440 回答
0

表单操作导致它转到 php 页面。我们使用 jQuery 来抑制默认操作，因为您正在让按钮运行您的功能。

 $("#deletestarmontForm").submit( function() {
  return false;
  event.preventDefault();
});

我想会的。

于 2013-10-11T20:23:25.817 回答
0 
$("#button3").click( function(e) {
    e.preventDefault();
});
于 2013-10-11T20:21:41.510 回答
0

尽管所有其他答案都可以很好地使用e.preventDefault，但我认为这不是您的问题的原因。 return false;应该做你想做的就好了。您可以看到您的代码在这个fiddle中有效。我的猜测是您的代码还有其他问题。可能是一个 JS 错误（检查您的控制台），它阻止处理程序正确运行，因此回退行为是原始表单提交。

于 2013-10-11T20:34:25.507 回答