Почему моя функция Javascript работает только НЕКОТОРЫЕ времена?

Question

Моя песочница здесь: http://9.latest.truxmap.appspot.com/

Сначала щелкните маркер на карте (если их нет при загрузке страницы, установите флажок «скоро откроются продовольственные грузовики» в виджете навигации). Далее перейдите на вкладку «Отзывы».

В GWT, каждый раз, когда я открываю маркер, я вызываю функцию javascript resizeReviewTab (), которая исправляет проблему стилей, возникающую, учитывая тот факт, что содержимое на вкладках статуса и обзора является динамическим. Если Javascript сработал, вы увидите, что вместо текстовых кнопок на вкладке «Обзоры» вместо переключателей располагаются ЗВЕЗДЫ. В противном случае вы увидите простые переключатели.

Я не могу понять, что происходит, когда маркер НЕ РАБОТАЕТ должным образом. Как это может сработать один раз, потом не снова, а потом снова работать после нескольких разных маркеров? Вот функция, которая называется:

function resizeReviewTab(){ 

    $('#content').text(""); 

    $('.statusWindowB').css('height', $('.statusWindowA').css('height'));                   

    $('.name-sliding').focus(function() {

        $('.name-label-sliding').animate({ marginLeft: "133px" }, "fast");

            if($(this).val() == "name")
                $(this).val() == "";

        }).blur(function() {

            if($(this).val() == "") {
                $(this).val() == "name";
                $('.name-label-sliding').animate({ marginLeft: "12px" }, "fast");
            }
        });     

    $('.content-sliding').focus(function() {
            $('.content-label-sliding').fadeOut("slow");
    });

    starify();  
} 

starify () - это javascript для плагина jQuery jquery.stars с несколькими модификациями, который можно увидеть здесь: http://9.latest.truxmap.appspot.com/lib/jquery.rating.js

Мне нужно вызвать эту функцию, потому что, если я просто загружу ее в начале html-документа, ни в одном из информационных окон, созданных нажатием на карту, никогда не будут переключаться переключатели на звезды.

Это довольно неприятно, я с нетерпением жду ваших ответов. Спасибо!

Answer 1

Эти биты определенно битые

if($(this).val() == "name")
    // next line is checking whether val equals ""
    // we already know it equals "name"
    // so it returns false(which is discarded)
    $(this).val() == ""; "name" ,

И

if($(this).val() == "") {
    // next line is checking whether val equals "name"
    // we already know it equals ""
    // so it returns false(which is discarded)
    $(this).val() == "name";
    $('.name-label-sliding').animate({ marginLeft: "12px" }, "fast");
}

Я думаю, вы имели в виду

if($(this).val() == "name")
    $(this).val(''); // sets val to nothing

И

if($(this).val() == "") {
    $(this).val("name"); // sets val to "name"
    $('.name-label-sliding').animate({ marginLeft: "12px" }, "fast");
}

Answer 2

Два ответа, данные @amurra и @meouw, были действительными и могли вызвать проблемы в будущем. Однако ответ на вопрос, заданный в OP, состоит в том, что GWT вызывает SelectionChangedHandler ДВАЖДЫ каждый раз, когда активная ячейка изменяется - один раз, когда ячейка отменяется, и однажды, когда другая ячейка выбирается повторно. Это приводило к двойному вызову функции javascript, что приводило к неприятному поведению. Большое спасибо за помощь в этой теме!

Answer 3

Возможно, вы захотите отменить привязку ваших событий перед привязкой, если функция вызывается несколько раз. Это поможет предотвратить множественные привязки, что может привести к странным и противоречивым результатам.

function resizeReviewTab(){ 

$('#content').text(""); 

$('.statusWindowB').css('height',$('.statusWindowA').css('height'));                   

$('.name-sliding').unbind("focus").focus(function() {

    $('.name-label-sliding').animate({ marginLeft: "133px" }, "fast");

        if($(this).val() == "name")
            $(this).val() == "";

    }).unbind("blur").blur(function() {

        if($(this).val() == "") {
            $(this).val() == "name";
            $('.name-label-sliding').animate({ marginLeft: "12px" }, "fast");
        }
    });     

$('.content-sliding').unbind("focus").focus(function() {
        $('.content-label-sliding').fadeOut("slow");
});

starify();  

}