Question

我正在使用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;
    });

});

Answer 1

如果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可以从jQuery 1.7+版本开始提供。如果您使用的是以前的版本，则需要使用jQuery live方法

Answer 2

谢谢你的回答，Shyju。我对UI Tooltip遇到了同样的问题，并且您的解决方案有所帮助：

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

在AJAX表单提交后，jQuery工具提示停止工作

2 个答案: