Question

我在内容页面中有各种部分，可根据用户通过点击事件选择的内容动态替换。我也在可点击项目上使用工具提示插件。根据点击的内容，将动态替换其他可点击的项目。

我已经通过.delegate（）解决了点击事件的初始化问题，但我不确定如何为动态内容初始化.tooltip（）插件。

代码如下所示：

$(document).ready(function(){

    // This works...
    $("#content").delegate(".etype", "click", function () {
        var elem = $(this);
        var parent_id = $(this).attr('rel').replace("id_", "");
        $.ajax({
            url: '/panel/' + parent_id,
            success: function(data) {
                var obj = $.parseJSON(data);
                for (var key in obj) {
                    $('#'+obj[key]['panel']+'panelwrapper .panelcontainer').html(obj[key]['content']);
                    $('.'+obj[key]['etype']+'_type.etype').removeClass('selected');
                    elem.addClass('selected');
                }
            }
        });     
    });

    // This doesn't work for new AJAX content.
    // Not sure if .delegate() can be used here...
    $(".etype.showtip").tooltip({
        effect: 'fade', 
        position: 'center right',
        opacity: 0.7,
        offset: [3, 0],
    });
});

Answer 1

在这里找到解决方案......

tooltip for Ajax-loaded triggers - jQuery live?

$(document).delegate("[title]", "mouseenter", function() {
    if (!$(this).data("tooltip")) {
        $(this).tooltip({position: "top center", offset: [-7, 10]});
        $(this).trigger("mouseenter");
    }   
});

Answer 2

查看live事件

$(".etype.showtip").live("tooltip", function(){
    effect: 'fade', 
    position: 'center right',
    opacity: 0.7,
    offset: [3, 0],
});

编辑。

哦，我很抱歉推荐现场演出。

据我所知，问题是工具提示功能只被调用一次（在window.load上）。

尝试在load事件和ajax成功函数上调用该方法。

jQuery初始化动态加载的内容

2 个答案: