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>

Answer 1

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

Answer 2

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

Answer 3

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(){...});
})

Answer 4

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!

Answer 5

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?

Answer 6

Does this help add javascript into a html page with jquery

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