Обработка событий JavaScript и Firefox

У меня есть форма на моем сайте, которая позволяет посетителям загружать медиафайлы с помощью API Filestack/filepicker.io (filestack.com). После успешной загрузки Filestack возвращает объект JSON, который предоставляет подробную информацию о загрузке.Обработка событий JavaScript и Firefox

Он работает в Chrome, Safari, iOS, однако не работает в Firefox. В Firefox он генерирует эту ошибку: ReferenceError: событие не определено

Мое понимание заключается в том, что Firefox обрабатывает события по-другому, чем браузеры, использующие Webkit (см. Эту статью: ReferenceError: event is not defined error in Firefox), однако мои навыки javascript недостаточно разработаны, чтобы помочь мне устранить неполадки это без некоторой помощи.

Я использую событие onchange, которое запускает функцию setVideoUrl(); Может ли кто-нибудь помочь мне понять, как обновить этот код, чтобы он правильно описал обработчики событий и будет работать в Firefox?

<input type="filepicker" data-fp-apikey="xxx" data-fp-mimetypes="video/*" data-fp-container="modal" data-fp-services="COMPUTER" data-fp-store-location="azure" data-fp-store-container="app1" data-fp-button-text="&nbsp;" data-fp-button-class="select-your-video-button" onclick="uploadVideo()" onchange="return setvideourl();"> 

function setVideoUrl(){ 
    var myvideourl = event.fpfile.url; 
    var myvideofilename = event.fpfile.filename; 

    jQuery("#input_1_14").val(myvideourl); 
    jQuery("#input_1_11").val(myvideofilename); 

    jQuery("#input_1_11").attr("readonly", true); 
    jQuery("#input_1_11").show(); 
    jQuery("#videochoice").hide(); 
    jQuery("p.required-field").hide(); 
    jQuery("#choosedifferentvideo").show(); 
}

Update: Я сейчас, используя этот код, однако, когда носитель загружен в Filestack и возвращает JSON функция никогда не вызывает в любом браузере.

<input type="filepicker" data-fp-apikey="xxx" data-fp-mimetypes="video/*" data-fp-container="modal" data-fp-services="COMPUTER" data-fp-store-location="azure" data-fp-store-container="app1" data-fp-button-text="&nbsp;" data-fp-button-class="select-your-video-button" onclick="uploadVideo()"> 


jQuery('input[type="filepicker"]').on("change", function(event){ 
    alert('function triggered'); 

    var myvideourl = event.fpfile.url; 
    var myvideofilename = event.fpfile.filename; 

    jQuery("#input_1_14").val(myvideourl); 
    jQuery("#input_1_11").val(myvideofilename); 

    jQuery("#input_1_11").attr("readonly", true); 
    jQuery("#input_1_11").show(); 
    jQuery("#videochoice").hide(); 
    jQuery("p.required-field").hide(); 
    jQuery("#choosedifferentvideo").show(); 

});

источник

2016-07-12 brianfidler

неявного глобальный 'event' объект является устаревшим. Я бы сказал, используйте 'addEventListener', но вы используете jQuery, поэтому нет никаких оправданий для использования атрибутов' on * '. – zzzzBov

Как я уже отмечал, мой javascript немного ржавый, поэтому я понимаю, что вы говорите, я должен удалить onclick и onchange из тега ''? Я бы вызвал onclick и onchange с чем-то вроде этого? '$ (" input [type = filepicker] ") .click (function() {}' и '$ (" input [type = filepicker] ") .change (function() {}' – brianfidler

Либо использовать встроенное событие jQuery или использовать addEventListener() вместо вашего элемента ввода, привязывая к функции, которая принимает объект события в качестве своего аргумента. Затем вы можете использовать этот объект события внутри функции. – ManoDestra

Используйте метод вместо использования в HTML-событий JQuery on атрибуты:

<input type="filepicker" data-fp-apikey="xxx" data-fp-mimetypes="video/*" data-fp-container="modal" data-fp-services="COMPUTER" data-fp-store-location="azure" data-fp-store-container="app1" data-fp-button-text="&nbsp;" data-fp-button-class="select-your-video-button" onclick="uploadVideo()" /> 

jQuery('input[type="filepicker"').on("change", function(event){ 
    var myvideourl = event.fpfile.url; 
    var myvideofilename = event.fpfile.filename; 

    jQuery("#input_1_14").val(myvideourl); 
    jQuery("#input_1_11").val(myvideofilename); 

    jQuery("#input_1_11").attr("readonly", true); 
    jQuery("#input_1_11").show(); 
    jQuery("#videochoice").hide(); 
    jQuery("p.required-field").hide(); 
    jQuery("#choosedifferentvideo").show(); 

});

источник

2016-07-12 18:31:02

Спасибо, Jacques, было несколько проблем с синтаксисом с этим кодом, но он похож на то, что я тестировал. Однако, когда среда завершает загрузку, это изменение никогда не запускается, поэтому эта функция никогда не запускается. Я попытался с синтаксисом выше, а также с. .change (function (event)). – brianfidler

@brianfidler Рад помочь! Если бы этот ответ сработал для вас, пожалуйста, примите его в качестве правильного ответа. –

ответ

Смежные вопросы