私は2つの異なるAjaxのファイルに2つのフォームを持っているajaxChangeSimple.phpとajaxChangAdv.php。ユーザーがボタンを押すと、2つのフォームを入れ替える必要があります。
$(document).ready(function(){
$('.changeBtn').on('click',function(){
var yo="<?php echo 'ip_searchmod_'.$unique_qsid; ?>";
$.ajax({
type:"POST",
url:"ajaxChangeSimple.php",
success: function(response){
$('#' + yo).html(response);
$('#swapper').addClass('simpleBtn');
$('#swapper').removeClass('changeBtn');
}
});
});
});
$(document).ready(function(){
$('.simpleBtn').on('click',function(){
var yo="<?php echo 'ip_searchmod_'.$unique_qsid; ?>";
$.ajax({
type:"POST",
url:"ajaxChangeAdv.php",
success: function(response){
$('#' + yo).html(response);
$('#swapper').addClass('changeBtn');
$('#swapper').removeClass('simpleBtn');
}
});
});
});
<div id="swapper" class="changeBtn">Change</div>
初めてボタンをクリックすると、fromsが入れ替わり、のクラスも入れ替わり#swapperます。しかし、もう一度クリックすると、のクラスが最初のajax関数で#swapperある場合でも、.simpleBtn呼び出され続けます。（ネットワーク経由で確認しました）。
何が問題なのか？
ロジック委任イベントとトグルクラスを単純化できます。例：
$(document).on('click', '.changeBtn, .simpleBtn', function(){
var yo="<?php echo 'ip_searchmod_'.$unique_qsid; ?>";
$.ajax({
type:"POST",
url:$(this).hasClass('changeBtn') ? "ajaxChangeSimple.php" : "ajaxChangeAdv.php",
success: function(response){
$('#' + yo).html(response);
$('#swapper').toggleClass('simpleBtn changeBtn');
}
});
});
期待どおりに動作しない場合もありますが、特定のケースでは動作すると思います。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加