Question

我不知道我做错了什么。首先，这是场景：我有搜索者，用jQuery（ajax）调用一个php文件来响应搜索（preventDefault在这里工作），在响应里面，我有一个按钮，用一个问题调用一个灯箱，我有这里有另外两个按钮，一个按钮来自一个表单，这里是preventDefault不起作用的地方。我们来看看代码：

搜索者档案：

<form action="" method="post" name="search_form" id="search_form">
    <input type="text" name="search" id="search" class="search">
</form>
<div class="resultado"></div>

第一个功能（在ajax.js内）：

$(function(){
  $('#search').focus();
  $('#search_form').submit(function(e){
       e.preventDefault();
  })

   $('#search').keyup(function(){
         var envio = $('#search').val();

         $('.resultado').html('<h3><img src="../../img/load.gif"/> Buscando</h3>')

        $.ajax({
           type: 'POST',
           url: 'php/buscador.php',
           data: ('search='+envio),
           success: function(resp){
                if(resp!=""){
                      $('.resultado').html(resp);
                 }
           }
       })
    })
})

PHP文件（参见html评论）：

    <?php 
    require_once('../conn/conection.php');

    sleep(0.5);

    $search = '';
    if (isset($_POST['search'])){
        $search = $_POST['search'];
    }

    $consulta = "SELECT * FROM clientes WHERE telefono LIKE '%".$search."%' LIMIT 2";
    $resultado = $connect->query($consulta);
    $fila = mysqli_fetch_assoc($resultado);
    $total = mysqli_num_rows($resultado);

?>
<?php if ($total>0 && $search!=''){ ?>
    <h3>Resultado:</h3>
    <?php do{?>
    <div class="datos">
        <div class="datos-icon">
            <img src="../../img/deliver_icon.png">
        </div>
        <div class="datos-info">
            <span><?php echo $fila['telefono'];?></span><br/><br/>
            <b>Nombre:</b> <?php echo $fila['nombre'];?><br/>
            <b>Domicilio:</b> <?php echo $fila['domicilio'];?><br/>
            <b>Entre:</b> <?php echo $fila['calle1'];?> y <?php echo $fila['calle2'];?><br/>
            <b>Referencia:</b> <?php echo $fila['ref'];?>
        </div>
        <div class="datos-ver">
            <a href="cliente.php?id=<?php echo $fila['id_cliente'];?>"><button class="b-lista" title="Ver Cliente"><img src="../../img/view_icon.png" width="30px"></button></a>
                             <!--===== HERES THE =====-->
                             <!--===== BUTTON TO =====-->
                             <!--==== THE LIGHTBOX ====-->
                <a href="javascript:pedidoOpen();"><button class="b-lista" title="Hizo Pedido"><img src="../../img/pedido_icon.png" width="30px"></button></a>
            </div>
        </div>
        <?php } while($file=mysqli_fetch_assoc($resultado));?>
    <?php }
    elseif($total>0 && $search=='') echo '<h3>Debes ingresar un número de teléfono</h3>';
    else echo '<h3>No se encontró al cliente.</h3><p>Regístralo en las opciones de arriba.</p>';
    ?>
<!--===== HERES THE =====-->
<!--==== THE LIGHTBOX ====-->
        <div class="pedido-modal">
                <div class="pedido-modal-frame">
                    <div class="pedido-modal-info">
                        <h2>Confirmar Pedido</h2>
                        <div id="pedido-modal-respuesta">
                            <ul>
                                <li>
                                    <!--===== HERE NEEDS =====-->
                                    <!--==== THE preventDefault() ====-->
                                    <!--==== LOOK THE 2ND FUNCTION ====--> 
                                        <form method="post">
                                            <input type="hidden" id="cacahuate" name="cacahuate" value="<?php echo $fila['id_cliente']; ?>">
                                            <button type="submit" id="hacer-pedido" class="boton-registro p-arreglo">SÍ</button>
                                        </form>
                                    </li>
                                    <li><a href="javascript:pedidoClose();"><button class="boton-registro remove p-arreglo">NO</button></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
            </div>

第二个函数（按顺序在同一个ajax.js中）：

$(function(){
       $('#hacer-pedido').on('click', function(e){
         e.preventDefault();
       })
 })

目前我正在测试第二个函数的preventDefault（），它不起作用。任何的想法？谢谢你的帮助。

更新

我做了一个有效的改变，我知道这不是一个好的做法。欢迎提出改进我的代码的建议。

<div class="pedido-modal">
<--=== THE CHANGE: ===-->
<script type="text/javascript" src="../../js/ajax.js"></script>
    <div class="pedido-modal-frame">
        <div class="pedido-modal-info">
            <h2>Confirmar Pedido</h2>
            <div id="pedido-modal-respuesta">
                <ul>
                    <li>
                        <form method="post">
                            <input type="hidden" id="cacahuate" name="cacahuate" value="<?php echo $fila['id_cliente']; ?>">
                            <button type="submit" id="hacer-pedido" class="boton-registro p-arreglo">Sí</button>
                        </form>
                    </li>
                    <li><a href="javascript:pedidoClose();"><button class="boton-registro remove p-arreglo">NO</button></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

试试这个：

$(function (){
    $('body').on('click', '#hacer-pedido', function (e){
        e.preventDefault();
    })
 });

<强>解释

您尝试将click事件绑定到DOM完成呈现后添加到页面的元素。相反，将click事件绑定到现有的DOM元素（最好是最接近的父容器 - 我选择body只是为了演示）。

注意：您有多个ID为hacer-pedido的元素 - 这些元素无效且会导致问题：ID必须是唯一的。使用类来代替多个元素。

使用preventDefault（）的麻烦仍然是重定向

1 个答案: