jquery - 使用 jQuery 在 IE8 或 Firefox 中不触发对话框单击监听器

Question

我有这个点击监听器，但由于某种原因它没有在 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>

Answer 1

您的错误是由 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> 的 child
现在，看看 this fiddle 。在几乎每个浏览器中， fiddle 都显示 <button> 的子级不会触发任何事件。元素。

修复代码

要修复您的代码，请替换 jQuery(".ui-button-text").click(function() {通过以下任一方式:

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

检查这个 comparison of the methods ( fiddle )，您将看到该错误是由 jQuery UI 插件的错误实现/假设引起的。

链接:

• fiddle :Testing event listeners在大多数浏览器中，此 fiddle 显示按钮子元素的事件监听器未触发。
• fiddle :Solution - 您的代码与修补后的代码的比较