在单独的php文件上定义Bootstrap按钮

Working with two php files, index.php and search.php. index sends some parameters to search, which performs a few queries into a database, and then returns the information on a table, stored into $output. I now want to add a bootstrap button to the output, that calls a simple show/hide jQuery function. The button is created, but it doesn't work when I test it on index.php

使用两个php文件，index.php和search.php。 index将一些参数发送到搜索，它会对数据库执行一些查询，然后返回表上的信息，存储到$ output中。我现在想在输出中添加一个引导按钮，它调用一个简单的show / hide jQuery函数。该按钮已创建，但在index.php上测试时它不起作用

<div class="col-sm-8">
        <table class="table table-hover" id="output">
        </table>

        <div id="edit" >
          <div class="page-header" id="editar" style="display: none;">
            <h2 id="producto">Placeholder<button id="exit" type="button" class="btn pull-right"><span class="glyphicon glyphicon-remove"></button><!--Clicking this button hides the edit div and shows the output table--></h2>
          </div>
        </div>
  </div>

The exit/editbtn button calls the following:

exit / editbtn按钮调用以下内容：

  <script>
    $(document).ready(function(){
       $("#exit").click(function(){
          $(document.getElementById("edit")).hide();
          $(document.getElementById("output")).show();
       });
    });
    $(document).ready(function(){
       $("#editbtn").click(function(){
          $(document.getElementById("edit")).show();
          $(document.getElementById("output")).hide();
       });
     });
</script>

And the definition of the "editbtn" is made on the separate php file:

并且“editbtn”的定义是在单独的php文件中进行的：

if($query->num_rows){
  $rows = $query->fetch_all(MYSQLI_ASSOC);
  forEach($rows as $row){
    $output .=  '<tr><td><button id="editbtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button></td><!--Clicking this button hides the output table and shows the edit div--></tr>'; 
  }
  $output .= '</tbody>';

So in the end, I have the table with the button created, but it does nothing when I click on it.

所以最后，我创建了一个带有按钮的表，但是当我点击它时它什么也没做。

2 个解决方案

#1

Why dont you try the same in order?

你为什么不按顺序尝试？

Like:

喜欢：

<script>
    $(document).ready(function(){
       $("#exit").click(function(){
          $("#edit").hide();
          $("#output").show();
       });

       $("#editbtn").click(function(){
          $("#edit")).show();
          $("#output")).hide();
       });
     });
</script>

This should work, always that you dont insert the edit button with ajax AND by definition, if you are using IDs, you are supposed to have only one element, if you have it between a foreach, it could cause you a problem.

这应该工作，总是你没有插入编辑按钮与ajax和定义，如果你使用ID，你应该只有一个元素，如果你在foreach之间，它可能会导致你的问题。

#2

It seems to be the jQuery selectors, they should be like this:

它似乎是jQuery选择器，它们应该是这样的：

$("#edit").show();

Or in JavaScript:

或者在JavaScript中：

document.getElementById('edit').styles.display = "none"; //or use addClass

PD: don't use two ready functions, put the listeners on the same one ;)

PD：不要使用两个就绪函数，把听众放在同一个函数上;）

Edit:

编辑：

Add a console.log in the function, and check out the console on the developer tools of your browser. Also try to comment the PHP query, except the output.

在函数中添加console.log，并在浏览器的开发人员工具上查看控制台。还尝试注释PHP查询，输出除外。

#1