按钮，jQuery和模态

问题描述：

我试图更好地理解模态和js。我试图使用与php文件相关的按钮，以便一旦按钮被点击，使php文件的内容显示在模式窗口中。按钮，jQuery和模态

所以......

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"); 
});

答

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

尝试将其更改为：

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

而且你$('#liste > button:first').click(renderHTML);

后把它放在你的代码的结束让我知道，如果这不能解决问题。

编辑：尝试在HTML中为这些按钮创建新的自定义类。这是很好的一个标志设置为自定义类，像1-定制类或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

谢谢。我尝试过，但在更改之后，我仍然需要首先双击。 – Aloha

我想我误解了你的问题。所以你需要一个双击事件监听器才能使你的模态工作？函数还需要在双击上运行？ –

它目前需要双击，但我希望它只需要一次点击。一旦我双击了所有的按钮，只需一次点击，直到我刷新页面，然后我需要再次双击。我希望它一直是单击。谢谢 – Aloha

按钮，jQuery和模态

相关推荐