Dialog Click listener not triggering in IE8 or Firefox with jQuery

Question

I have this click listener and for some reason it's not triggering in IE8 or 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){

            } 
        });   

    });

So I can see the "listener attached" in the console, but I don't see the click trigger, this works in chrome, what am I doing wrong here?

Thanks!

UPDATE: I have tried using live("click", function()... instead but it's not triggering

UPDATE: So another Update, I should mention that the content of this dialog is acquired through a separate page. It's loaded with AJAX, this dynamically loaded content contains this click listener.

UPDATE: Here is the code that loads the content, please be aware I didn't actually write this piece of code, so I don't fully understand why its done the way it's done here:

        <!-- 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 -->

And here is the link:

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

Is it possible you've forgotten to wrap your code in a `$(document).ready()` or similar function? — Clive, Oct 07 '11 at 17:54
can you host it on jsfiddle. also can you tell me on what control you are trying to add the listener on — Baz1nga, Oct 07 '11 at 17:55
Thanks for the response Clive, I do have it wrapped in jQuery(document).ready(function() { — Doug Molineux, Oct 07 '11 at 17:56
The ui-button-text element is a button that's located inside a jQuery UI dialog popup — Doug Molineux, Oct 07 '11 at 17:57
I have been trying to set one up, but does jsfiddle support the loading of a different page into the dialog? When I load a normal dialog where the div is defined on the same page, the listener triggers when live() is utilized — Doug Molineux, Oct 27 '11 at 17:51
Does this article help in any way? http://stackoverflow.com/questions/3014150/jquery-ui-dialog-live-not-working It's hard to try it since we don't have your source code to test on :) — phil, Oct 27 '11 at 17:54
By different page do you mean an iframe or just taking html from another page and then injecting it into a div on the current page. — Keith.Abramo, Oct 27 '11 at 17:58
It does work in Chrome, really well, just not Firefox and IE8, I'm not getting any errors, when I click the button, nothing happens. I'll look over the link, thanks Miho. @Keith, I mean it's taking content from another page and loading it into a div, including the script above — Doug Molineux, Oct 27 '11 at 17:59
Please post the code for how you're loading the dialog. As this fiddle http://jsfiddle.net/TQKCR/2/ demonstrates, it works fine for a dialog created on a static div element. — Jonas Høgh, Oct 27 '11 at 18:03

score 16 · Accepted Answer · edited Jun 20 '20 at 09:12

Your error is caused by a wrong implementation/assumption of the jQuery UI button() method. The relevant code is shown and explained below (see the bottom of the answer for a fix):

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

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

The output of this code is as follows:

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

As you can see, the element with class .ui-button-text is a child of a <button> element.
Now, have a look at this fiddle. In almost every browser, the fiddle shows that no event ever triggers at childs of the <button> element.

Fixing your code

To fix your code, replace jQuery(".ui-button-text").click(function() { by either of the following:

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

Check this comparison of the methods (fiddle), and you will see that the error is caused by your wrong implementation/assumption of the jQuery UI plugin.

Links:

Fiddle: Testing event listeners In most browsers, this fiddle show that event listeners of the button's child element are not triggered.
Fiddle: Solution - The comparison of your code, and the patched code

score 4 · Answer 2 · answered Oct 27 '11 at 18:39

I figured it out, I needed to attach the listener to ui-button:

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

Not

jQuery(".ui-button-text")

I don't know why this is the case, I can't believe it took me this long to figure out, sorry guys, wish I could have given the points to one of you..

score 2 · Answer 3 · answered Oct 27 '11 at 17:51

2

Try using livequery it's slightly different then live where it will be triggered even when it changes through ajax

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

jQuery(".ui-button-text").livequery(function(){
  $(this).click(function(){...});
})

answered Oct 27 '11 at 17:51

John Vint

39,695
7
78
108

score 2 · Answer 4 · answered Oct 27 '11 at 18:25

It looks like this might be a race condition, your trying to wire up the buttons before they've been added to the dom. and perhaps chrome is getting the dom together faster then other browsers.

move your button handling code to after your sure the dialog has it's 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 -->

Hope that Helps!

score 1 · Answer 5 · answered Oct 07 '11 at 18:00

1

console.log does not work on IE sometimes especially when you are not using some kind of developer tools. may be that is your error?

answered Oct 07 '11 at 18:00

Baz1nga

15,485
3
35
61

Thank you for the suggestion, but this isn't the problem, I have Firebug up, and I can see the first console log "listener attached" – Doug Molineux Oct 27 '11 at 17:44

Juan Ignacio · Answer 6 · 2011-10-27T18:27:58.800

1

I would start debugging by making ajax.php do something (like writing a log to a txt) to see if it even gets called and if it does, what's the output.

Update to your update: if the event listener comes from somewhere else the first thing you should do is run the code in the console so you're sure the code runs ok... or you could just `console.log('event handler was triggered')

EDIT: To be more clear on the context of your code. The 2nd part of the code you publish loads the first? If that's the case, the fist part should use dataType: 'script', to load the second but that would mean refactoring the code

edited Oct 27 '11 at 18:27

answered Oct 27 '11 at 17:48

Juan Ignacio

3,217
8
33
53

This loaded content does load because I see "listener attached" in the log, this script is executed from the loaded script. – Doug Molineux Oct 27 '11 at 17:49
but do you see "this should have triggered"? – Juan Ignacio Oct 27 '11 at 18:00
In chrome I do, but in FF and IE I don't – Doug Molineux Oct 27 '11 at 18:05

score 1 · Answer 7 · edited May 23 '17 at 10:34

1

Does this help add javascript into a html page with jquery

You might have an issue dynamically loading your script into the page.

edited May 23 '17 at 10:34

Community

1
1

answered Oct 27 '11 at 18:03

Keith.Abramo

6,952
2
32
46

Dialog Click listener not triggering in IE8 or Firefox with jQuery

7 Answers7

Fixing your code

Links: