У меня возникла проблема, подобная этой: JavaScript не работает внутри DIV, загруженного AJAX но моя проблема в том, что у меня нет ни одного события, к которому можно привязаться. У меня есть это:

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

Привязка всех элементов с атрибутом title к этому объекту. Он прекрасно работает при перезагрузке страницы. Но на элементах из вызова AJAX история другая, она выглядит так, как будто javascript не существует. Я знаю, как связывать элементы с другими событиями из AJAX, используя live(), но как мне связать элементы, у которых нет 'событий'?

1
IROEGBU 31 Янв 2013 в 22:09

2 ответа

Лучший ответ

Вы должны повторно связать всплывающую подсказку после вызова ajax.

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

Или, как предлагает jbabey, вы можете использовать полный обратный вызов для повторной привязки всплывающей подсказки (упрощенная версия от здесь ) :

$(
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'});
});
9
Thomas Kremmel 21 Фев 2013 в 12:17

Вы можете создать событие изменения элемента.

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

Тогда вы просто запустите изменение, когда хотите, чтобы атрибут вступил в силу.

$('title').trigger('change');
0
zmanc 31 Янв 2013 в 18:12