0

jQuery と jQuery UI を使用しています。フォーム ($("#compareit").submit(function(e){...) を送信すると、ページの左右の列が非表示になり、フォーム送信の AJAX 結果が表示されます。いくつかの簡単なツールチップを使用します.ツールチップはフォームを送信する前に正常に機能します...送信後、機能しなくなります.DOMを変更しているためだと思います.これを回避する方法について何か考えはありますか?

投稿するにはコードが多すぎるため、ここに機能を示します。コードが役立つ場合は、喜んで投稿します (以下)。

ajax 呼び出しを行うフォームを送信します。マイページの左右の列を非表示 ページに結果を表示します。ツールチップが機能しなくなる

問題のツールチップは次のとおりです: $('.tTip').betterTooltip({speed: 150, delay: 300});

$(document).ready(function(e) { 

    positions = new Array ('8' , '9');
    positions_num = 7;
    position_list = new Array(positions_num);

    $("#tabsP" ).tabs();
    $("#tooManySelected").hide();
    $('.tTip').betterTooltip({speed: 150, delay: 300});

    $("#compareit").submit(function(e){
        $("#topsection").hide();
        $("#tabsP").hide();
        $("#bottomWrap").hide(); 
        $("#error").html('');
        $("#leftcolumn").hide();
        $("#rightcolumn").hide();
        $("#yearChooser").hide();
        e.preventDefault();
        var queryString = $('#compareit').serialize();
        var dataString = queryString + "&count=" + totalselected;
        //alert(dataString);

        $.ajax({
            type: 'GET',
            url:'newmlbcompare2p.php', 
            cache: false,
            data: dataString,
            dataType : 'html',
            success:function(result){
                $('#ajaxDiv').html(result);
            }
        });
        return false; 
    });

    $( "#accordionRight" ).accordion({
        collapsible: true,
        autoHeight: false
    });
    $( "#accordionLeft" ).accordion({
        header: "h3", 
        autoHeight: false,
        navigation: true,
        collapsible: true,
        active: true
    })

    $(".btn-slide").click(function(){
        $("#ppanel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });

});
4

2 に答える 2

3

ajax内のツールチップが機能しない場合は、メソッドをバインドしてツールチップを有効にした後にロードしたコンテンツが原因です。そのため、ツールチップ関数は追加された新しい要素を認識しません。したがって、おそらく、ロードされた新しいコンテンツにその関数を再度バインドする必要があります。データをロードした後、ajax成功イベントでこれを行うことができます

$.ajax({
            type: 'GET',
            url:'newmlbcompare2p.php', 
            cache: false,
            data: dataString,
            dataType : 'html',
            success:function(result){
                $('#ajaxDiv').html(result);
                $('.tTip').betterTooltip({speed: 150, delay: 300});

            }
});

編集：同じことが他のイベントにも当てはまります。あなたが言ったように、あなたのクリックイベントは機能していません、あなたはおそらくjQueryを使用するためにそれを変更する必要がありますon

変化する

 $(".btn-slide").click(function() {
  //do stuff
 });

に

$("#yourContainerDiv").on("click", ".btn-slide", function(event){
     //do stuff
});

onは、現在の要素と将来の要素（ajaxからロードしたものなど）を処理します。

http://api.jquery.com/on/

jquery onは、jQuery1.7以降のバージョンから利用できます。以前のバージョンを使用している場合は、jQueryliveメソッドを使用する必要があります

于 2012-04-05T00:54:32.800 に答える
0

Shyjuさん、ご回答ありがとうございます。私はUIツールチップで同じ問題を抱えていました.あなたの解決策は役に立ちました:

<script>
$(document).ready(function() {
    $("#dialog-window").dialog({
    autoOpen: false,
    width: 540,
    height: 200,
    modal: true,
    buttons: [
    {
    text: "OK",
    click: function() {
    $( this ).dialog( "close" );
    },
}
]
});
    $("#dialog-link").on("click", function(event){
    // post data
    $.post('submit.php', $('#formName').serialize(), function(data){
    $('#content-container').html (data);
    //  add tooltip         
    $('.tooltipClassName').tooltip({
    position: {
    my: "center bottom-10",
    at: "center top",
    using: function( position, feedback ) {
    $( this ).css( position );
    $( "<div>" )
    .addClass( "arrow" )
    .addClass( feedback.vertical )
    .addClass( feedback.horizontal )
    .appendTo( this );
    }
    }
    });
});
$("#dialog-window" ).dialog("open");
event.preventDefault();
});
});
</script>
于 2014-09-05T10:21:43.420 に答える