Question

我试图更好地理解模态和js。我曾尝试使用与php文件相关的按钮，以便在点击按钮后使php文件的内容出现在模态窗口中。

所以......

button_1获取file_1并在点击后将其置于模态中 button_2获取file_2并在单击后将其置于模态中。等

我已经实现了大部分这个但是出于某种原因，每个按钮需要被点击两次（对于模态窗口的第一个外观）才能使模态工作。之后，只需单击一下即可完成，直到页面刷新为止。此时，再次需要两次点击。

如果我不尝试将php文件中的信息插入模态窗口，我的代码工作正常。所以...我猜这是因为按钮必须做两件事。 1.获取信息，然后打开模态窗口。

如何在一次点击中合并两者？

我试图预先存档文件。

<link rel="prefetch" href="/folders/to/php/files/1.php">

我还尝试在html中预先插入模态。

我尝试使用加载而不是单击函数。

我的尝试并未改变我首先需要双击按钮的事实。

任何帮助表示赞赏!!

奖金：如果我可以让按钮动态找到他们的相关文件，那将是奖金。意思是我可以简单地添加或删除按钮，他们会找到正确的文件。我需要做的就是添加与按钮一样多的文件。感谢您的时间和帮助！

以下是代码：

$("#liste > button").on('click', apar);

function apar() {
  $(this).addClass("active").siblings().removeClass("active");
  $('#main_p').load("/folders/to/php/files/" + (1 + $(this).index()) + ".php");

  $(document).ready(function() {
    // Do something with the DOM
    $('.active').click(function() {

    });
  });

}

function renderHTML(data) {


  var htmlP = data.url;

  $('#main_p').html(htmlP);

}

// On page load, click on the first `btn` to automatically load the data for it 
$('#liste > button:first').click(renderHTML);

.btn {
  margin: 5px;
  padding 0px 5px;
  text-align: center;
  background-color: #0095ff;
  color: #FFF;
  border: none;
}

.btn:hover,
.btn:focus {
  outline: none !important;
  color: #FFF;
}

.active {
  background-color: #891;
}

<!doctype html>
<html>

<head>
  <title> Modals </title>



  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>





</head>

<body>

  <div id="liste">
    <button class="btn" data-toggle="modal" data-target="#myModal_1">
      <div class="tree">to file 1</div>
    </button>
    <button class="btn" data-toggle="modal" data-target="#myModal_2">
      <div class="tree">to file 2</div>
    </button>
    <button class="btn" data-toggle="modal" data-target="#myModal_3">
      <div class="tree">to file 3</div>
    </button>

    <h4 id="main_tit"></h4>
    <div class="main_p" id="main_p"></div>
    <div id="main_ima"></div>

    <script src="js/main.js" async></script>
</body>

</html>

这是1.php文件的示例：

<div id="myModal_1" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Look 1</h4>
  </div>
  <div class="modal-body">
    <?php

      echo "I have the 1.php <br>";
      echo "its a go!";

     ?>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>

更新：我在按钮上添加了自动选择。所以我删除了html中的按钮属性，并将其添加到JS的顶部：

var idVar = $("#liste").find("button").each(function(index){
$(this).attr("data-target","#myModal_" + (1+$(this).index()));
$(this).attr("data-toggle","modal");
$(this).attr("class","btn");
});

Answer 1

在js文件的顶部有$("#liste > button").on('click', apar);

尝试将其更改为：

$('body').on('click', '#liste > button', apar);

在$('#liste > button:first').click(renderHTML);

之后将其放在代码的末尾

如果这不能解决问题，请告诉我。

编辑：尝试为HTML中的这些按钮创建新的自定义类。最好为自定义类设置标记，例如l-custom-class或customClass，尝试遵循以下示例：

HTML：

<div id="#liste">
    <button type="button" class="l-liste-button">btn1</button>
    <button type="button" class="l-liste-button">btn2</button>
    <button type="button" class="l-liste-button">btn3</button>
</div>

JS：

function apar(){
  //some code for apar function..
}
function renderHTML(){
  //some code for renderHTML function
}

$('body').on('click', '.l-liste-button', apar);
$('body').on('click', '.l-liste-button:first', renderHTML);

这是JSFiddle

按钮，jquery和模态

1 个答案: