Диалог. Вызов прослушивателя не запускается в IE8 или Firefox с помощью jQuery.
У меня есть этот прослушиватель и по какой-то причине он не запускается в 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, что я делаю неправильно здесь?
Спасибо!
UPDATE: я попытался использовать live ("click", function()... вместо этого, но не запускал
UPDATE: Итак, еще одно обновление, я должен отметить, что содержимое этого диалогового окна получено через отдельную страницу. Он загружается с помощью AJAX, этот динамически загруженный контент содержит этот прослушиватель кликов.
UPDATE: вот код, который загружает контент, помните, что я действительно не писал этот фрагмент кода, поэтому я не совсем понимаю, почему он сделал то, что он сделал здесь:
<!-- 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>
Ответы
Ответ 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>
.
Теперь взгляните на эта скрипка. Почти в каждом браузере скрипта показывает, что ни одно событие никогда не запускает дочерние элементы элемента <button>
.
Фиксация вашего кода
Чтобы исправить свой код, замените jQuery(".ui-button-text").click(function() {
на одно из следующих действий:
jQuery(".ui-button").click(function() { // Recommended
jQuery(".ui-button-text").parent().click(function(){ // Alternative method
Проверьте сравнение методов (скрипка), и вы увидите, что ошибка вызвана вашей неправильная реализация/допущение плагина jQuery UI.
Ссылки:
- Fiddle: Тестирование прослушивателей событий В большинстве браузеров эта скрипта показывает, что прослушиватели событий дочернего элемента кнопки не срабатывает.
- Fiddle: Решение - Сравнение вашего кода и исправленного кода
Ответ 2
Я понял, мне нужно было подключить слушателя к ui-кнопке:
jQuery(".ui-button").live("click", function() {
Не
jQuery(".ui-button-text")
Я не знаю, почему это так, я не могу поверить, что мне потребовалось много времени, чтобы разобраться, извините, ребята, мне хотелось бы дать очки одному из вас.
Ответ 3
Попробуйте использовать livequery
немного иначе, чем вживую, где он будет запущен, даже если он изменится через ajax
http://plugins.jquery.com/project/livequery
jQuery(".ui-button-text").livequery(function(){
$(this).click(function(){...});
})
Ответ 4
Похоже, это может быть состояние гонки, вы пытаетесь подключить кнопки до того, как они будут добавлены в 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 -->
Надеюсь, что это поможет!
Ответ 5
console.log
иногда не работает на IE, особенно когда вы не используете какие-либо инструменты для разработчиков. может быть, это ваша ошибка?
Ответ 6
Я бы начал отладку, сделав ajax.php что-нибудь (например, запись журнала в txt), чтобы увидеть, вызван ли он даже вызванным, и если да, то какой вывод.
Обновите свое обновление: если прослушиватель событий приходит откуда-то еще, первое, что вам нужно сделать, это запустить код в консоли, чтобы убедиться, что код работает нормально... или вы можете просто `console.log( 'обработчик события был запущен')
РЕДАКТИРОВАТЬ: Чтобы быть более понятным в контексте вашего кода. Вторая часть кода, который вы публикуете, загружает первый? Если в этом случае кулачная часть должна использовать dataType: 'script',, чтобы загрузить вторую, но это будет означать рефакторинг кода
Ответ 7
Помогает ли это добавить javascript в html-страницу с jquery
У вас может возникнуть проблема с динамической загрузкой script на странице.