Question

我正在尝试用jquery改变按钮的行为，但是我没有工作，当我点击模态的按钮没有任何反应时，脚本标签中的代码不是最终的代码，但有助于查看是否有什么发生的情况。

...
</head>
    <body>
        <script type="text/javascript">
            $( "#crear" ).click(function() {
              alert( "Handler for .submit() called." );
            });
        </script>

        <nav class="navbar navbar-default navbar-static-top" role="navigation">
          <div class="container">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Clases</a></li>
                <li><a href="office">Despachos</a></li>
                <li><a href="clase">Otros Servicios</a></li>
                <li><a href="clase">Administracion de usuario</a></li>
            </ul>
          </div>
        </nav>
         <div class="container">
            <div class="row">
                  <h1>Editor de Clases</h1>
              </div>
               <div class = "row">
                  <p>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
                         Nuevo
                    </button>
                  <p>
             </div>

             <div class="row">
                 <table class="table table-striped table-bordered">
                    <thead>
                     <tr>
                        <th>Nombre</th>
                        <th>Información</th>
                        <th>Opciones</th>
                      </tr>
                    </thead>
                    <tbody>
                    <?php foreach($clases as $clase_item){ 
                        //echo $clase_item->nombre;
                        echo "<tr>";
                            echo "<td>".$clase_item->nombre."</td>";
                            echo "<td>".$clase_item->info."</td>";
                            echo "<td align='center'>";
                            echo '<a class="btn btn-success" href="clase/update/'.$clase_item->nombre.' ">Editar</a>';
                            echo '<a class="btn btn-danger" href="clase/delete/'.$clase_item->nombre.'">Borrar</a>';
                            echo "</td>";
                        echo "</tr>";   
                    } ?>
             </tbody>
              </table>
          </div>

            <!--Modal para crear nueva clase-->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Crear nueva clase</h4>
                  </div>
                  <div class="modal-body">
                    <?php echo validation_errors(); ?>
                    <?php $attributes = array('id' => 'modalform');?>
                    <?php echo form_open('clase/create',$attributes);?>  
                    <form class="form col-md-12 center-block">
                          <div id="error_msg"></div>    
                          <div class="form-group">
                            <input type="text" class="form-control input-lg"  id="name" name="name" placeholder="Nombre"/>
                          </div>
                          <div class="form-group">
                             <input type="text" class="form-control input-lg" id="info" name="info" placeholder="Información"/>
                          </div>
                          <div class="form-group">
                            <button id="crear"type="button"class="btn btn-success btn-lg btn-block">Crear</button>
                          </div>
                        </form>

                  </div>
                </div>
              </div>
            </div>

            <!--Fin modal crear-->


    </body>
</html>

脚本标记内的代码尚未执行。

Answer 1

为确保以更好的方式处理此问题，请在结束正文标记之前添加以下函数：

$(function () {
    $( "#crear" ).click(function() {
        alert( "Handler for .submit() called." );
    });
});

只要DOM准备就绪，就会调用它。这种写法更快！

Answer 2

原因是因为您的<script>在加载正文的DOM之前正在运行，因此$( "#crear" )将为null。

您可以尝试以下几种方法：

您可以创建一个事件监听器，以便在没有jQuery的情况下监听DOMContentLoaded，如下所示：
```
document.addEventListener('DOMContentLoaded', function () { 
    // do stuff
});
```
或者您可以使用jQuery：
```
$(function () {
    // do stuff
});
```
以上是更快捷的$(document).ready()。
另一种方法是在<script></script>之前将</body>移到底部。
对于现代版本，请将您的JS移动到外部文件中，将defer属性添加到<script> <script defer>，然后将其移至{{1} }}。它应该看起来像：
```
<head>
```
在<script src="stuff.js" defer></script>。
中
注意： 大多数（但不是全部）现代浏览器都支持此方法。有关支持哪些浏览器的详细信息，请参阅this page。

Answer 3

正如boombox在他的answer中所说，你需要在加载DOM之后运行脚本。最好的方法是将代码放在document.ready：

中

<script type="text/javascript">
    $(document).ready(function () {
        $( "#crear" ).click(function() {
            alert( "Handler for .submit() called." );
        });
    }
</script>

Answer 4

我只是在小提琴中试过你的剧本而且很有效。 https://jsfiddle.net/6g44zy04/

    $("#crear").click(function() {
      alert( "Handler for .submit() called." );
    });

您是否正确链接到jQuery？你有没有为jQuery定义var而不是$？

值得确保在DOM完成后加载。

$(document).ready(function() {
// your code here
}

jquery onclick事件不起作用，没有任何反应

4 个答案: