Question

我遇到类似这样的问题：JavaScript not working inside AJAX loaded DIV但我的问题是我没有任何要绑定的事件。我有这个：

$('[title]').colorTip({color:'yellow'});

将具有'title'属性的所有元素绑定到该对象。它在页面重新加载时工作正常。但是从AJAX调用的元素调用故事是不同的，它显示像javascript不存在。我知道使用live()将元素绑定到AJAX中的其他事件，但是如何绑定没有'events'的元素？

Answer 1

你必须在ajax调用后重新绑定工具提示。

$( document ).ajaxStop( function() {
    $('[title]').colorTip({color:'yellow'});
});

或者按照jbabey的建议，您可以使用完整的回调来重新绑定工具提示（简化版本来自here）：

$(
function(){
    // Get a reference to the content div (into which we will load content).
    var jContent = $( "#content" );             
    // Hook up link click events to load content.
    $( "a" ).click(
        function( objEvent ){
            var jLink = $( this );
            // Clear status list.
            $( "#ajax-status" ).empty();
            // Launch AJAX request.
            $.ajax(
                {
                    // The link we are accessing.
                    url: jLink.attr( "href" ),
                    // The type of request.
                    type: "get",
                    // The type of data that is getting returned.
                    dataType: "html",
                    complete: function(){
                        console.log("finalized ajax request");
                        //re-bind the tooltip
                        $('[title]').colorTip({color:'yellow'});
                    },
                    success: function( strData ){
                        console.log("ajax success");
                        console.log(strData);
                        // to something with the received data
                        jContent.html( strData );
                    }
                }                           
                );
            // Prevent default click.
            return( false );                    
        }
        );

}
);

根据您的评论，我提供了以下内容：您还必须确保在页面加载时绑定工具提示：

$( document ).ready( function() {
    $('[title]').colorTip({color:'yellow'});
});

Answer 2

您可以在元素上创建更改事件。

$('title').live('change', function () {
whatever you want to do here
})

然后，只要您希望该属性生效，您就会触发更改。

$('title').trigger('change');

AJAX调用后JQuery ToolTip不工作

2 个答案: