ボタン、jqueryとmodals

私はモーダルとjsをよりよく理解しようとしています。私は、ボタンをクリックすると、phpファイルの内容をモーダルウィンドウに表示するために、phpファイルに変換されたボタンを使用しようとしました。ボタン、jqueryとmodals

そう...

button_1はfile_1を取得し、それをクリックした後、モーダルに入れます。
button_2はfile_2を取得し、クリックするとモーダルにします。など

私はこれをほとんど習得しましたが、何らかの理由でモーダルウィンドウが機能するためには、各ボタンを2回クリックする必要があります（モーダルウィンドウの最初の表示）。その後、ページがリフレッシュされるまで、簡単なクリックがうまくいきます。その時点で、再び2回のクリックが必要となります。

私のコードは、モーダルウィンドウにPHPファイルから情報を挿入しようとしないとうまくいきます。だから...私はそれがボタンが2つのことをしなければならないという事実に関連していると推測している。 1.情報を取得し、2.モーダルウィンドウを開きます。

ワンクリックでどのように組み合わせればよいですか？

私はファイルを先読みしようとしました。

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

私はまた、htmlでモーダルをあらかじめ挿入しようとしました。

私は機能をクリックする代わりに負荷を使用しようとしました。

私は最初にボタンをダブルクリックする必要があるという事実を変更していません。

ご了承ください。

BONUS：ボタンを使用して関連ファイルを動的に見つけることができれば、それはボーナスになります。単にボタンを追加または削除するだけで、正しいファイルが見つかるはずです。私がする必要があるのは、ボタンと同じ数のファイルを追加することだけです。あなたの時間と助けてくれてありがとう！ここで

はコードです：

<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>

UPDATE：ここ

$("#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ファイルの一例である私が追加されましたボタンの自動選択。だから私は、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"); 
});

出典

2017-09-02 Aloha

あなたのjsファイルの先頭で$("#liste > button").on('click', apar);

に変更してみあり：

はあなたの $('#liste > button:first').click(renderHTML);

後

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

そして、あなたのコードの最後にそれを置くが、これはそれを修正しない場合、私に教えてください。

編集：これらのボタンの新しいカスタムクラスをHTMLで作成してみてください。この例に従うことをしようとカスタムクラス、L-カスタムクラスのようなもの、または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

出典

2017-09-02 20:46:32

ありがとうございます。私はそれを試しましたが、変更後も最初はダブルクリックが必要です。 – Aloha

私はあなたの質問を誤解したと思います。したがって、モーダルを機能させるには、ダブルクリックイベントリスナーが必要ですか？関数もダブルクリックで実行する必要がありますか？ –

現在、ダブルクリックが必要ですが、ワンクリックが必要です。一度すべてのボタンをダブルクリックすると、1回のクリックが機能し、ページをリフレッシュするまで、ダブルクリックする必要があります。私はそれを一回のクリック、すべての時間にしたい。ありがとう – Aloha

答えて

関連する問題