当前位置： 文江博客话题详情

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

发布于 2024-12-09 03:12:57 字数 4455 浏览 0 评论 0原文

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

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+"¶m2="+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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（7）

-残月青衣踏尘吟 2024-12-16 03:12:58

看起来这可能是一个竞争条件，您试图在将按钮添加到 dom 之前将它们连接起来。也许 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+"¶m2="+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 -->

希望有帮助！

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+"¶m2="+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!

回复 原文
凡间太子 2024-12-16 03:12:58

console.log 有时在 IE 上不起作用，尤其是当您不使用某种开发工具时。也许这是你的错误？

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?

回复 原文
太阳哥哥 2024-12-16 03:12:58

是否有助于使用 jquery 将 javascript 添加到 html 页面

这 将脚本动态加载到页面中时可能会出现问题。

Does this help add javascript into a html page with jquery

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

回复 原文
花落人断肠 2024-12-16 03:12:58

我会通过让 ajax.php 做一些事情（比如将日志写入 txt）来开始调试，看看它是否被调用，如果被调用，输出是什么。

更新您的更新：如果事件侦听器来自其他地方，您应该做的第一件事是在控制台中运行代码，这样您就可以确定代码运行正常...或者您可以只是 `console.log('event handler被触发了'）

编辑：为了更清楚地了解代码的上下文。您发布的代码的第二部分加载第一部分？如果是这种情况，第一部分应该使用 dataType: 'script', 加载第二部分，但这意味着重构代码

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

回复 原文
无敌元气妹 2024-12-16 03:12:57

您的错误是由 jQuery UI button()< 的错误实现/假设引起的/a> 方法。相关代码如下所示并进行了解释（请参阅答案底部的修复）：

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 是

修复代码

要修复代码，请将 jQuery(".ui-button-text").click(function() { 替换为以下任一内容：

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

检查此 方法比较（小提琴），你会发现错误是由你错误的实现/假设引起的jQuery UI 插件

链接：

  • 小提琴：测试事件侦听器 在大多数浏览器中，此小提琴显示按钮子元素的事件侦听器未触发
  • 小提琴：解决方案 - 您的代码与修补代码

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
回复 原文
年少掌心 2024-12-16 03:12:57

我想通了，我需要将侦听器附加到 ui-button：

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

不是，

jQuery(".ui-button-text")

我不知道为什么会出现这种情况，我不敢相信我花了这么长时间才弄清楚，对不起，伙计们，希望我能给出给你们中的一个人点..

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

回复 原文
ゃ懵逼小萝莉 2024-12-16 03:12:57

尝试使用 livequery 它与 live 略有不同，即使它通过 ajax 更改也会被触发

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

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

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(){...});
})
回复 原文
~没有更多了~

关于作者

夏天碎花小短裙

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文