Слушатель диалогового окна Click не запускается в IE8 или Firefox с помощью jQuery - PullRequest
13 голосов
/ 07 октября 2011

У меня есть прослушиватель кликов, и по какой-то причине он не запускается в IE8 или Firefox:

console.log("listener attached");

jQuery(".ui-button-text").click(function() {

        console.log("this should have triggered");

        var ajaxUrl = '/ajax.php?popup=true';

        var dataString = "param="+param+"&param2="+param2;

        // contruct the ajax request
        jQuery.ajax({
            url: ajaxUrl, 
            dataType: 'json', 
            data: dataString, 
            beforeSend: function() {
                jQuery(".ui-button-text").html("Saving...");
            },
            complete: function() {
                jQuery(".ui-dialog-content").dialog("close");
            },
            success:function(response){

            } 
        });   

    });

Итак, я вижу «слушатель подключен» в консоли, но я не вижу триггера щелчка, это работает в chrome, что я здесь не так делаю?

Спасибо!

ОБНОВЛЕНИЕ: я пытался использовать live ("click", function () ... вместо этого, но это не срабатывает

ОБНОВЛЕНИЕ: Итак, еще одно обновление, я должен упомянуть, что содержимое этого диалога приобретается через отдельную страницу. Он загружен с AJAX, этот динамически загружаемый контент содержит этот прослушиватель кликов.

ОБНОВЛЕНИЕ: Вот код, который загружает контент, пожалуйста, имейте в виду, что я на самом деле не писал этот кусок кода, поэтому я не до конца понимаю, почему это сделано так, как здесь:

        <!-- START OF NEW WINDOW POPUP -->
        jQuery('.option_window').click(function(){
            var url = jQuery(this).attr('href');
            var title = jQuery(this).attr('title');
            jQuery('<div />').dialog(
            {
                autoOpen: false,
                width: 720,
                title: "Manage Code",
                modal: true,
                buttons:{ 
                    "Save and Return":function() {
                        var self = this;

                        var popupForm = jQuery("form.submit_on_close");
                        //if( jQuery("form.submit_on_close").attr('action') != '#' || jQuery("form.submit_on_close").attr('action') != '') {
                        if(popupForm.attr('action') != '#' || popupForm.attr('action') != '') {
                            jQuery.ajax({
                                  url: jQuery("form.submit_on_close").attr('action'),
                                  dataType: 'json',
                                  data: jQuery("form.submit_on_close").serialize(),
                                  success: function(data) {     
                                        data = eval(data);
                                        if(data.resp == "success") { 
                                            var obj = jQuery('#repl_activation_row');
                                            obj.unbind('mouseover');
                                            if( data.property_code > 0) {
                                                if( obj.hasClass('codeoff') ) {
                                                    obj.removeClass('codeoff').addClass('codeon');
                                                }
                                            } else {

                                                if( obj.hasClass('codeon') ) {
                                                    obj.removeClass('codeon').addClass('codeoff');
                                                }

                                            }
                                        }
                                        jQuery(self).dialog('close');
                                    }
                                });
                        }
                        else 
                            jQuery(self).dialog('close');
                    }
                },
                //title:title,
                open: function(event, ui){ 

                    jQuery(".ui-dialog").delay(600).queue(function(n) {
                        var topPos = jQuery(".ui-dialog").offset().top;
                        var finalPos = topPos - (jQuery(".ui-dialog").height() / 3);
                        jQuery(".ui-dialog").css("top", finalPos);
                    n();
                    });



                    var self = this; 
                    jQuery.getJSON(url, {}, function(data){ 
                        jQuery(self).html(data); 
                    });
                },
                close: function(event, ui){ jQuery(this).dialog( "destroy" ); jQuery(this).remove(); }
            }).dialog('open'); 
            return false;
        })
        <!-- END OF NEW WINDOW POPUP -->

А вот и ссылка:

<a href="/popupmanager.php?code=3212&client=4432" class="actions option_window menulink">Manage</a>

Ответы [ 7 ]

16 голосов
/ 28 октября 2011

Ваша ошибка вызвана неправильной реализацией / предположением метода jQuery UI button().Соответствующий код показан и объяснен ниже (см. В нижней части ответа исправление):

HTML:        <button id="save">Save and Return</button>

JavaScript:  $("#save").button();

Вывод этого кода выглядит следующим образом:

<button id="save" class="ui-button ... ui-button-text-only" role="button" ..>
    <span class="ui-button-text">Click me</span>
</button>

Как вы можетевидите, элемент с классом .ui-button-text является потомком элемента <button>.Теперь взгляните на эту скрипку .Почти в каждом браузере скрипка показывает, что ни одно событие не запускается у потомков элемента <button>.

Исправление кода

Чтобы исправить код, замените jQuery(".ui-button-text").click(function() { на любой изследующее:

jQuery(".ui-button").click(function() {               // Recommended
jQuery(".ui-button-text").parent().click(function(){  // Alternative method

Проверьте это сравнение методов (fiddle), и вы увидите, что ошибка вызвана неправильной реализацией / предположениемПлагин jQuery UI.

Ссылки:

4 голосов
/ 27 октября 2011

Я разобрался, мне нужно было присоединить слушателя к кнопке пользовательского интерфейса:

jQuery(".ui-button").live("click", function() {

Не

jQuery(".ui-button-text")

Я не знаю, почему это так, я не могу поверить, что мне понадобилось так много времени, чтобы понять, извините, ребята, жаль, что я мог бы дать очки одному из вас ..

2 голосов
/ 27 октября 2011

Похоже, что это может быть состояние гонки, вы пытаетесь соединить кнопки до того, как они были добавлены в домен.и, возможно, chrome собирает dom быстрее, чем другие браузеры.

переместите код обработки кнопок, чтобы убедиться, что в диалоге есть html.

jQuery('.option_window').click(function(){
        var url = jQuery(this).attr('href');
        var title = jQuery(this).attr('title');
        jQuery('<div />').dialog(
        {
            autoOpen: false,
            width: 720,
            title: "Manage Code",
            modal: true,
            buttons:{ 
                "Save and Return":function() {
                    var self = this;

                    var popupForm = jQuery("form.submit_on_close");
                    //if( jQuery("form.submit_on_close").attr('action') != '#' || jQuery("form.submit_on_close").attr('action') != '') {
                    if(popupForm.attr('action') != '#' || popupForm.attr('action') != '') {
                        jQuery.ajax({
                              url: jQuery("form.submit_on_close").attr('action'),
                              dataType: 'json',
                              data: jQuery("form.submit_on_close").serialize(),
                              success: function(data) {     
                                    data = eval(data);
                                    if(data.resp == "success") { 
                                        var obj = jQuery('#repl_activation_row');
                                        obj.unbind('mouseover');
                                        if( data.property_code > 0) {
                                            if( obj.hasClass('codeoff') ) {
                                                obj.removeClass('codeoff').addClass('codeon');
                                            }
                                        } else {

                                            if( obj.hasClass('codeon') ) {
                                                obj.removeClass('codeon').addClass('codeoff');
                                            }

                                        }
                                    }
                                    jQuery(self).dialog('close');
                                }
                            });
                    }
                    else 
                        jQuery(self).dialog('close');
                }
            },
            //title:title,
            open: function(event, ui){ 

                jQuery(".ui-dialog").delay(600).queue(function(n) {
                    var topPos = jQuery(".ui-dialog").offset().top;
                    var finalPos = topPos - (jQuery(".ui-dialog").height() / 3);
                    jQuery(".ui-dialog").css("top", finalPos);
                n();
                });



                var self = this; 
                jQuery.getJSON(url, {}, function(data){ 
                    jQuery(self).html(data); 
                    //NOT SURE WHY YOU ARE USING .getJSON TO GET WHAT LOOKS LIKE HTML, BUT IF THAT WORKS, I'LL LEAVE IT ALONE
                    //PUT THE BUTTON STUFF HERE:
                        jQuery(".ui-button-text").click(function() {

                            console.log("this should have triggered");

                            var ajaxUrl = '/ajax.php?popup=true';

                            var dataString = "param="+param+"&param2="+param2;

                            // contruct the ajax request
                            jQuery.ajax({
                                url: ajaxUrl, 
                                dataType: 'json', 
                                data: dataString, 
                                beforeSend: function() {
                                    jQuery(".ui-button-text").html("Saving...");
                                },
                                complete: function() {
                                    jQuery(".ui-dialog-content").dialog("close");
                                },
                                success:function(response){

                                } 
                            });   

                        });

                });
            },
            close: function(event, ui){ jQuery(this).dialog( "destroy" ); jQuery(this).remove(); }
        }).dialog('open'); 
        return false;
    })
    <!-- END OF NEW WINDOW POPUP -->

Надеюсь, что поможет!

2 голосов
/ 27 октября 2011

Попробуйте использовать livequery, оно немного отличается от того, где оно будет запущено, даже если оно меняется через ajax

http://plugins.jquery.com/project/livequery

jQuery(".ui-button-text").livequery(function(){
  $(this).click(function(){...});
})
1 голос
/ 27 октября 2011

Помогает ли это добавить javascript на html-страницу с помощью jquery

Возможно, у вас возникла проблема с динамической загрузкой вашего скрипта на страницу.

1 голос
/ 27 октября 2011

Я бы начал отладку, заставив ajax.php что-то сделать (например, записать журнал в текстовый файл), чтобы увидеть, вызывается ли он вообще, и если да, то какой вывод.

Обновление до вашего обновления: если прослушиватель событий приходит откуда-то еще, первое, что вы должны сделать, это запустить код в консоли, чтобы вы были уверены, что код работает нормально ... или вы можете просто `console.log ( 'обработчик события сработал')

РЕДАКТИРОВАТЬ: чтобы быть более понятным в контексте вашего кода. Вторая часть кода, которую вы публикуете, загружает первую? Если это так, первая часть должна использовать dataType: 'script', для загрузки второго, но это будет означать рефакторинг кода

1 голос
/ 07 октября 2011

console.log иногда не работает в IE, особенно если вы не используете какие-либо инструменты разработчика. может быть это твоя ошибка?

...