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

            }
});

编辑：同样的事情也适用于您的其他活动。就像你说的，你的点击事件不起作用，你可能需要改变它来使用 jQueryon

改变

 $(".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+ 版本开始可用。如果您使用的是以前的版本，则需要使用 jQuerylive方法

于 2012-04-05T00:54:32.800 回答
0

谢谢你的回答，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>
于 2014-09-05T10:21:43.420 回答