我有这个点击监听器，由于某种原因它不会在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+"¶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){
}
});
});
所以我可以在控制台中看到“监听器附加”，但我没有看到点击触发器，这在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>
答案 0 :(得分：16)
您的错误是由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>元素的子元素。
现在，看看 this 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 （小提琴），您会看到错误是由您错误的实现/假设jQuery UI插件引起的。
答案 1 :(得分：4)
我想通了，我需要将听众附加到ui-button：
jQuery(".ui-button").live("click", function() {
不
jQuery(".ui-button-text")
我不知道为什么会这样，我不敢相信我花了这么长时间才弄清楚，对不起家伙们，希望我能把这些点给你们其中一个......
答案 2 :(得分：2)
尝试使用livequery它会稍微不同，即使它通过ajax更改也会被触发
http://plugins.jquery.com/project/livequery
jQuery(".ui-button-text").livequery(function(){
$(this).click(function(){...});
})
答案 3 :(得分：2)
看起来这可能是竞争条件，您尝试在按钮添加到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 -->
希望有帮助！
答案 4 :(得分：1)
console.log有时在IE上不起作用，尤其是当您不使用某种开发人员工具时。可能那是你的错误？
答案 5 :(得分：1)
我会通过让ajax.php做一些事情（比如写日志到txt）开始调试，看看它是否被调用，如果有，那么输出是什么。
更新到您的更新：如果事件监听器来自其他地方，您应该做的第一件事是在控制台中运行代码，这样您就可以确保代码运行正常......或者您可以只是`console.log（ '事件处理程序被触发'）
编辑：更清楚你的代码的上下文。您发布的代码的第二部分加载第一部分？如果是这种情况，第一部分应使用 dataType：'script'，加载第二部分，但这意味着重构代码
答案 6 :(得分：1)
这有助于add javascript into a html page with jquery
将脚本动态加载到页面中可能会出现问题。