Étiquette : event

[Magento 2] Gestion des événements et du passage de l’objet This dans les widgets jQuery UI avec les méthodes proxy ou bind

17/02/2023 / admin

Ce post sur stack overflow qui explique très bien le problème et donne des solutions: How to handle events in jQuery UI widgets.

Cet autre post sur stack overflow qui explique comment solutionner le problème à l’aide de la méthode .bind(): Pass correct « this » context to setTimeout callback?.

Exemple de widget complet

$(document).on('click', <DOM element>, <JS function>.bind(this)); et setTimeout(function () { ... }.bind(this), 250);

L’objet this passé dans l’événement .on('click', ...) par l’intermédiaire de la méthode .bind() est bien celui du widget et pas la cible du click (récupérable au besoin dans la fonction _handleNewOptionSelection via un e.target.

define([
    'jquery',
    'jquery-ui-modules/widget'
], function($) {
    'use strict';

    $.widget('mage.configurableProduct', {
        options: {
           attributeCodeArr: [],
        },

        /**
         * @private
         */
        _create: function () {
            this.productOptionsWrapperElem = $('#product-options-wrapper');
            this.anySwatchOptionElem = $('.swatch-option', this.productOptionsWrapperElem);

            this._initialize();
        },

        _initialize: function() {
            this._setKlarnaBannerVisibility(this.options.attributeCodeArr);

            $(document).on('click', this.anySwatchOptionElem, this._handleNewOptionSelection.bind(this));
        },

        _setKlarnaBannerVisibility: function (attributeCode) {
            for (var i = 0; i < attributeCode.length; i++) {
                if (this._selectedSwatchOptionIsOutOfStock(attributeCode[i])) {
                    this.element.attr('aria-hidden', true);
                    break;
                } else {
                    this.element.attr('aria-hidden', false);
                }
            }
        },

        _selectedSwatchOptionIsOutOfStock: function (attributeCode) {
            var swatchAttributeElem = $('.swatch-attribute[data-attribute-code="' + attributeCode + '"]', this.productOptionsWrapperElem);

            return $('.swatch-option.selected.out-of-stock', swatchAttributeElem).length != 0 ? true : false;
        },

        _handleNewOptionSelection: function() {
            setTimeout(function () {
                this._setKlarnaBannerVisibility(this.options.attributeCodeArr)
            }.bind(this), 250);
        }
    });

    return $.mage.configurableProduct;

});

define([

'jquery',

'jquery-ui-modules/widget'

], function($) {

'use strict';

$.widget('mage.configurableProduct', {

options: {

attributeCodeArr: [],

/**

* @private

_create: function () {

this.productOptionsWrapperElem = $('#product-options-wrapper');

this.anySwatchOptionElem = $('.swatch-option', this.productOptionsWrapperElem);

this._initialize();

_initialize: function() {

this._setKlarnaBannerVisibility(this.options.attributeCodeArr);

$(document).on('click', this.anySwatchOptionElem, this._handleNewOptionSelection.bind(this));

_setKlarnaBannerVisibility: function (attributeCode) {

for (var i = 0; i < attributeCode.length; i++) {

if (this._selectedSwatchOptionIsOutOfStock(attributeCode[i])) {

this.element.attr('aria-hidden', true);

break;

} else {

this.element.attr('aria-hidden', false);

}

_selectedSwatchOptionIsOutOfStock: function (attributeCode) {

var swatchAttributeElem = $('.swatch-attribute[data-attribute-code="' + attributeCode + '"]', this.productOptionsWrapperElem);

return $('.swatch-option.selected.out-of-stock', swatchAttributeElem).length != 0 ? true : false;

_handleNewOptionSelection: function() {

setTimeout(function () {

this._setKlarnaBannerVisibility(this.options.attributeCodeArr)

}.bind(this), 250);

}

});

return $.mage.configurableProduct;

});

Autres manières d’utiliser des événements:

this.searchLabel.on('click', function (e) {
    // allow input to lose its' focus when clicking on label
    if (this.isExpandable && this.isActive()) {
        e.preventDefault();
    }
}.bind(this));

this.searchLabel.on('click', function (e) {

// allow input to lose its' focus when clicking on label

if (this.isExpandable && this.isActive()) {

e.preventDefault();

}

}.bind(this));

this.element.on('focus', this.setActiveState.bind(this, true));

// Fonction de référence:
/**
 * Sets state of the search field to provided value.
 *
 * @param {Boolean} isActive
 */
setActiveState: function (isActive) {
    this.searchLabel.toggleClass('active', isActive);

    if (this.isExpandable) {
        this.element.attr('aria-expanded', isActive);
    }

    if(isActive) {
        this.autoComplete.show();
    } else  {
        this.autoComplete.hide();
    }
},

this.element.on('focus', this.setActiveState.bind(this, true));

// Fonction de référence:

/**

* Sets state of the search field to provided value.

* @param {Boolean} isActive

setActiveState: function (isActive) {

this.searchLabel.toggleClass('active', isActive);

if (this.isExpandable) {

this.element.attr('aria-expanded', isActive);

}

if(isActive) {

this.autoComplete.show();

} else {

this.autoComplete.hide();

}

ATTENTION: dans l’exemple ci-dessus, la présence du paramètre true dans this.element.on('focus', this.setActiveState.bind(this, true)); peut dans certains cas faire que la fonction cible ne soit pas exécutée!
A ce moment, essayer ceci:

lpTag.events.bind('lpUnifiedWindow', 'state', this._setEngagementButtonVisibility.bind(this));
[...]
_setEngagementButtonVisibility: function(data) {
    alert(data.state);
}

lpTag.events.bind('lpUnifiedWindow', 'state', this._setEngagementButtonVisibility.bind(this));

[...]

_setEngagementButtonVisibility: function(data) {

alert(data.state);

}

Cas d’utilisation de `.bind()` avec `setInterval()`:

_initialize: function() {
    var checkLpTagVariableAvailability = setInterval(function() {
        if (lpTag != undefined) {
            clearInterval(checkLpTagVariableAvailability);

            this._bindLpTagEvents();
            this._handleFiltersMobileBtnVisibility();
        }
    }.bind(this), 1000);
},

_initialize: function() {

var checkLpTagVariableAvailability = setInterval(function() {

if (lpTag != undefined) {

clearInterval(checkLpTagVariableAvailability);

this._bindLpTagEvents();

this._handleFiltersMobileBtnVisibility();

}

}.bind(this), 1000);

Cas avec l’utilisation de matchMedia/mediaCheck

Notez la présence de .bind(this) après chaque fonction (entry, exit).

define([
    'jquery',
    "matchMedia",
    'jquery-ui-modules/widget'
], function ($, mediaCheck) {
    'use strict';

    $.widget('mage.mwSearch', {
        options: {
            isExpandable: null
        },

        _create: function () {
            this.isExpandable = this.options.isExpandable;

            _.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');

            mediaCheck({
                media: '(max-width: 768px)',
                entry: function () {
                    this.isExpandable = true;
                }.bind(this),
                exit: function () {
                    this.isExpandable = false;
                }.bind(this)
            });

define([

'jquery',

"matchMedia",

'jquery-ui-modules/widget'

], function ($, mediaCheck) {

'use strict';

$.widget('mage.mwSearch', {

options: {

isExpandable: null

_create: function () {

this.isExpandable = this.options.isExpandable;

_.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');

mediaCheck({

media: '(max-width: 768px)',

entry: function () {

this.isExpandable = true;

}.bind(this),

exit: function () {

this.isExpandable = false;

}.bind(this)

});

Utiliser la méthode `.bindAll` de Underscore

La méthode dans le code source du framework Underscore (version 1.8.2):

// Bind a number of an object's methods to that object. Remaining arguments
// are the method names to be bound. Useful for ensuring that all callbacks
// defined on an object belong to it.
_.bindAll = function(obj) {
var i, length = arguments.length, key;
if (length <= 1) throw new Error('bindAll must be passed function names');
for (i = 1; i < length; i++) {
  key = arguments[i];
  obj[key] = _.bind(obj[key], obj);
}
return obj;
};

// Bind a number of an object's methods to that object. Remaining arguments

// are the method names to be bound. Useful for ensuring that all callbacks

// defined on an object belong to it.

_.bindAll = function(obj) {

var i, length = arguments.length, key;

if (length <= 1) throw new Error('bindAll must be passed function names');

for (i = 1; i < length; i++) {

key = arguments[i];

obj[key] = _.bind(obj[key], obj);

}

return obj;

};

Dans les faits:

define([
    'jquery',
    'underscore',
    'jquery-ui-modules/widget'
], function ($, _) {
    'use strict';

    $.widget('mage.toto', {
        options: {},

        _create: function () {
            _.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');
        },

        /**
         * Executes when the search box is submitted. Sets the search input field to the
         * value of the selected item.
         * @private
         * @param {Event} e - The submit event
         */
        _onSubmit: function (e) {
            var value = this.element.val();

            if (isEmpty(value)) {
                e.preventDefault();
            }
        },

        /**
         * Executes when keys are pressed in the search input field. Performs specific actions
         * depending on which keys are pressed.
         * @private
         * @param {Event} e - The key down event
         * @return {Boolean} Default return type for any unhandled keys
         */
        _onKeyDown: function (e) {
            var keyCode = e.keyCode || e.which;
            switch (keyCode) {
                case $.ui.keyCode.HOME:
                    ...
                default:
                    return true;
            }
        },

        /**
         * Executes when the value of the search input field changes. Executes a GET request
         * to populate a suggestion list based on entered text. Handles click (select), hover,
         * and mouseout events on the populated suggestion list dropdown.
         * @private
         */
        _onPropertyChange: function () {
            clearTimeout(this.searchTimer);
            this.searchTimer = setTimeout($.proxy(this._launchSearch, this), 500);
        },

define([

'jquery',

'underscore',

'jquery-ui-modules/widget'

], function ($, _) {

'use strict';

$.widget('mage.toto', {

options: {},

_create: function () {

_.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');

/**

* Executes when the search box is submitted. Sets the search input field to the

* value of the selected item.

* @private

* @param {Event} e - The submit event

_onSubmit: function (e) {

var value = this.element.val();

if (isEmpty(value)) {

e.preventDefault();

}

/**

* Executes when keys are pressed in the search input field. Performs specific actions

* depending on which keys are pressed.

* @private

* @param {Event} e - The key down event

* @return {Boolean} Default return type for any unhandled keys

_onKeyDown: function (e) {

var keyCode = e.keyCode || e.which;

switch (keyCode) {

case $.ui.keyCode.HOME:

...

default:

return true;

}

/**

* Executes when the value of the search input field changes. Executes a GET request

* to populate a suggestion list based on entered text. Handles click (select), hover,

* and mouseout events on the populated suggestion list dropdown.

* @private

_onPropertyChange: function () {

clearTimeout(this.searchTimer);

this.searchTimer = setTimeout($.proxy(this._launchSearch, this), 500);

[Javascript] Attacher plusieurs événements à un même listener

01/07/2022 / admin

Source: Multiple Events to a Listener with JavaScript. Code source sous GitHub.

/**
 * 💡 WAY 1 💡
 */
const button1 = document.querySelector('.btnAction_1');

// 💬 Events
button1.addEventListener('click', showEvent1);
button1.addEventListener('mouseover', showEvent1);

// 💬 Function
function showEvent1(e) {
    const result1 = document.querySelector('.btnResult_1');
    result1.textContent = e.type;
}

/**

* 💡 WAY 1 💡

const button1 = document.querySelector('.btnAction_1');

// 💬 Events

button1.addEventListener('click', showEvent1);

button1.addEventListener('mouseover', showEvent1);

// 💬 Function

function showEvent1(e) {

const result1 = document.querySelector('.btnResult_1');

result1.textContent = e.type;

}

/**
 * 💡 WAY 2 💡
 */
const button2 = document.querySelector('.btnAction_2');

// 💬 Events
let myEvents = 'click mouseover'.split(' ');
myEvents.forEach(event => button2.addEventListener(event, showEvent2));

// 💬 Function
function showEvent2(e) {
    const result2 = document.querySelector('.btnResult_2');
    result2.textContent = e.type;
}

/**

* 💡 WAY 2 💡

const button2 = document.querySelector('.btnAction_2');

// 💬 Events

let myEvents = 'click mouseover'.split(' ');

myEvents.forEach(event => button2.addEventListener(event, showEvent2));

// 💬 Function

function showEvent2(e) {

const result2 = document.querySelector('.btnResult_2');

result2.textContent = e.type;

}

/**
 * 💡 WAY 3 💡
 */
const button3 = document.querySelector('.btnAction_3');

// 💬 Events
['click', 'mouseover'].forEach(event => button3.addEventListener(event, showEvent3));

function showEvent3(e) {
    const result3 = document.querySelector('.btnResult_3');
    result3.textContent = e.type;
}

/**

* 💡 WAY 3 💡

const button3 = document.querySelector('.btnAction_3');

// 💬 Events

['click', 'mouseover'].forEach(event => button3.addEventListener(event, showEvent3));

function showEvent3(e) {

const result3 = document.querySelector('.btnResult_3');

result3.textContent = e.type;

}

A noter que Chris Fernandini de gomakethings.com déclare encore l’option passive à false à la fin de la déclaration de son EventListener. En savoir plus sur les passive events listeners.

// Setup our function to run on various events
var someFunction = function (event) {
    // Do something...
};

// Add our event listeners
window.addEventListener('click', someFunction, false);
window.addEventListener('mouseover', someFunction, false);

// Setup our function to run on various events

var someFunction = function (event) {

// Do something...

};

// Add our event listeners

window.addEventListener('click', someFunction, false);

window.addEventListener('mouseover', someFunction, false);

[jQuery] Empêcher un événement de s’exécuter à de multiples reprises avec les méthodes On et Off (entre autres)

02/08/2018 / admin

Source: Prevent jQuery events from firing multiple times

Le problème

 $('a', '#cdDropdown').on('click', cachedMenu);

1	$('a', '#cdDropdown').on('click', cachedMenu);

Avec cette déclaration, la fonction cachedMenu à exécuter au clic sur un lien enfants de #cdDropdown dans le DOM était exécutée plusieurs fois (6 fois) à chacun de mes clics. La multiplication des exécutions était exponentielle car en m’amusant à cliquer environ 12 à 15 fois sur des liens, la console de debug a loggué pas moins de 11045 exécutions de ma fonction!!!

La solution

 $('a', '#cdDropdown').off('click', cachedMenu).on('click', cachedMenu);

1	$('a', '#cdDropdown').off('click', cachedMenu).on('click', cachedMenu);

Avant d’activer un événement avec la méthode jQuery .on(), il faut tout simplement le désactiver avec la méthode .off().

[jQuery] Vérifier en cours de saisie en live si un input[type= »text »] contient du contenu avec l’événement Input et la méthode Val

24/04/2018 / admin

Dans l’exemple qui suit, on procède à cette vérification pour désactiver une fonctionnalité de Collapse (Bootstrap) des champs de formulaires si du texte est saisi.

    <div class="form-group address-extra-info-trigger">
        <span class="control-label">
            <spring:theme code="address.line2"/>
        </span>
        <button id="triggerBillingAddressExtraInfo" class="btn-naked" type="button" data-toggle="collapse" data-target="#collapseBillingAddressExtraInfo" aria-expanded="false" aria-controls="collapseBillingAddressExtraInfo">
            <span class="show-extra-fields">
                <i class="glyphicon glyphicon-chevron-down"></i> <spring:theme code="naos.show"/></span>
            <span class="hide-extra-fields">
                <i class="glyphicon glyphicon-chevron-up"></i> <spring:theme code="naos.hide"/></span>
        </button>
    </div>

    <div class="collapse address-extra-info-fields" id="collapseBillingAddressExtraInfo">
        <input type="text" id="one" />
        <input type="text" id="two" />
        <input type="text" id="three" />
        [...]
    </div>

<spring:theme code="address.line2"/>

</span>

</button>

</div>

[...]

</div>

Si un seul champ à vérifier:

Si le champ qui a le focus n’est pas vide, on agit sur #triggerBillingAddressExtraInfo en ajoutant un style inline pointer-events: none; (qui désactive la possibilité de cliquer sur l’élément).

    $('input').on('input', function(e){
        var toto = $(this).val();
        console.log(toto);

        if(!toto == ''){
            $('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');
        }
        else{
            $('#triggerBillingAddressExtraInfo').removeAttr('style');
        }
    });

$('input').on('input', function(e){

var toto = $(this).val();

console.log(toto);

if(!toto == ''){

$('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');

}

else{

$('#triggerBillingAddressExtraInfo').removeAttr('style');

}

});

Si plusieurs champs à vérifier:

Sources: jQuery check if any text input has value et Detect changed input text box.

On ajoute la condition: si tous les champs au sein de #collapseBillingAddressExtraInfo sont vides, on retire le style inline pointer-events: none;.

    function hasValue(elem) {
        return $(elem).filter(function() { return $(this).val(); }).length > 0;
    }

    $('input', '#collapseBillingAddressExtraInfo').on('input', function(e){
        var toto = $(this).val();
        var titi = hasValue('#collapseBillingAddressExtraInfo input');
        // console.log(toto);
        // console.log(titi);

        if(!toto == ''){
            $('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');
        }
        else if(!titi == true) {
            $('#triggerBillingAddressExtraInfo').removeAttr('style');
        }
    });

function hasValue(elem) {

return $(elem).filter(function() { return $(this).val(); }).length > 0;

}

$('input', '#collapseBillingAddressExtraInfo').on('input', function(e){

var toto = $(this).val();

var titi = hasValue('#collapseBillingAddressExtraInfo input');

// console.log(toto);

// console.log(titi);

if(!toto == ''){

$('#triggerBillingAddressExtraInfo').css('pointer-events', 'none');

}

else if(!titi == true) {

$('#triggerBillingAddressExtraInfo').removeAttr('style');

}

});

Mieux, avec deux fonctions

    function hasValue(elem) {
        return $(elem).filter(function() { return $(this).val(); }).length > 0;
    }

    function deactivateCollapse(collapseElement, triggerElement){
        $('input', collapseElement).on('input', function(e){
            var focusedInputValue = $(this).val();
            var inScopeInputsValues = hasValue(collapseElement+' input');

            if(!focusedInputValue == ''){
                $(triggerElement).css('pointer-events', 'none');
            }
            else if(!inScopeInputsValues == true) {
                $(triggerElement).removeAttr('style');
            }
        });
    }

    deactivateCollapse('#collapseBillingAddressExtraInfo', '#triggerBillingAddressExtraInfo');
    deactivateCollapse('#collapseDeliveryAddressExtraInfo', '#triggerDeliveryAddressExtraInfo');

function hasValue(elem) {

return $(elem).filter(function() { return $(this).val(); }).length > 0;

}

function deactivateCollapse(collapseElement, triggerElement){

$('input', collapseElement).on('input', function(e){

var focusedInputValue = $(this).val();

var inScopeInputsValues = hasValue(collapseElement+' input');

if(!focusedInputValue == ''){

$(triggerElement).css('pointer-events', 'none');

}

else if(!inScopeInputsValues == true) {

$(triggerElement).removeAttr('style');

}

});

}

deactivateCollapse('#collapseBillingAddressExtraInfo', '#triggerBillingAddressExtraInfo');

deactivateCollapse('#collapseDeliveryAddressExtraInfo', '#triggerDeliveryAddressExtraInfo');

[jQuery] Surveiller les changements sur un élément du DOM avec la méthode Bind et l’événement DOMSubtreeModified

11/10/2017 / admin

Edit 11/02/2020: DOMSubtreeModified est désormais déprécié au profit de MutationObserver.

Mes propres expériences avec les MutationObserver:

[javaScript] Exploiter les Mutation Observers pour surveiller la disponibilité d’éléments dans le DOM

Pour surveiller les changements sur un élément du DOM avec jQuery, on va souvent vous renvoyer vers l’utilisation de l’événement .on('change', ...) ou des MutationObserver, mais il y a plus simple avec l’événement .bind('DOMSubtreeModified', ...).

Source: jQuery watch for domElement changes?. Demo JSfiddle.net – Listen DOM Changes using jQuery.

Edit 12/07/2018: j’ai remplacé la méthode .bind() aujourd’hui dépréciée par .on().

$('#content').on('DOMSubtreeModified', function(e) {
  if (e.target.innerHTML.length > 0) {
    // Content change handler
  }
});

$('#content').on('DOMSubtreeModified', function(e) {

if (e.target.innerHTML.length > 0) {

// Content change handler

}

});

[jQuery] Binder l’événement Click sur tous les éléments du DOM sauf un ou plusieurs éléments

11/10/2017 / admin

Source: jQuery bind click *ANYTHING* but *ELEMENT*

$('#special').on('click', function(e) {
    e.stopPropagation();
});

$(document).on('click', function (e) {
 // Do whatever you want; the event that'd fire if the "special" element has been clicked on has been cancelled.
});

$('#special').on('click', function(e) {

e.stopPropagation();

});

$(document).on('click', function (e) {

// Do whatever you want; the event that'd fire if the "special" element has been clicked on has been cancelled.

});

Annuler les effets d’event.stopPropagation()

Source: How to undo event.stopPropagation in jQuery?

var stop = false;
// do your logic here
if(stop){
    event.stopPropagation();
}

var stop = false;

// do your logic here

if(stop){

event.stopPropagation();

}

Faire en sorte que le $(document).on(‘click’) n’agisse qu’une fois

Utiliser la méthode .off().

$(document).on('click', function(e) {
  console.log("This will be displayed only once.");
  $(this).off(e);
});

$(document).on('click', function(e) {

console.log("This will be displayed only once.");

$(this).off(e);

});

[jQuery] Bloquer, jusqu’à sa validation, l’événement Submit dans un formulaire contenant plusieurs boutons

28/06/2017 / admin

Un formulaire est susceptible de contenir plusieurs boutons, par exemple dans le cas d’un formulaire sur plusieurs étapes avec un bouton prev, un bouton next pour naviguer d’une étape à l’autre et un bouton submit pour soumettre le formulaire.

Si on passe par une validation des champs étape par étape (les champs doivent être correctement renseignés sur une étape donnée avant de pouvoir passer à la suivante) et qu’on utilise (par exemple), le plug-in Abide de Foundation 6 for sites, la présence de l’attribut type="submit"> est obligatoire sur les boutons prev et next pour valider les champs saisis à l’étape en cours avant de pouvoir accéder à la suivante.

Problème: cette présence obligatoire de l’attribut type="submit"> sur les boutons prev et next a pour fâcheux résultat de soumettre le formulaire au clic sur ces derniers.

Solution: intercepter l’événement submit avec la méthode .bind().

  // By default, intercept submit event
  jQuery('form[id*="survey"]').bind('submit', function(e){
    e.preventDefault();
    return false;
  });

// By default, intercept submit event

jQuery('form[id*="survey"]').bind('submit', function(e){

e.preventDefault();

return false;

});

Ce code aura pour effet d’annuler la soumission du formulaire sur tous les boutons de celui-ci. Ce n’est pas tout-à-fait ce que l’on souhaite puisqu’arrivé à la fin de notre formulaire, il faut pouvoir soumettre les données.

Pour ce faire, on va commencer par masquer le vrai bouton de soumission :

jQuery('form[id*="survey"] p.normal:last-of-type input[type="submit"]').css('display', 'none');

1	jQuery('form[id*="survey"] p.normal:last-of-type input[type="submit"]').css('display', 'none');

On va ensuite créer un faux bouton à l’aide d’un élément a (qui ne pourra rien soumettre) :

jQuery('<a id="triggerSubmitButton" class="button" style="display: none;">Enregistrer (a)</a>').appendTo('form[id*="survey"] p.normal:last-of-type');

1	jQuery('<a id="triggerSubmitButton" class="button" style="display: none;">Enregistrer (a)</a>').appendTo('form[id*="survey"] p.normal:last-of-type');

Puis, au moment ou on souhaite laisser la possibilité à l’utilisateur de soumettre, on lance au clic sur notre faux bouton un .unbind() de l’événement submit et et un trigger-click sur le vrai bouton de soumission (qui reste toujours masqué) :

  jQuery('#triggerSubmitButton').on('click', function(){
    // Unbind intercept submit event 
    jQuery('form[id*="survey"]').unbind('submit');
    // Click (hidden) real submit button
    jQuery('form[id*="survey"] p.normal:last-of-type input[type="submit"]').click();
  });

jQuery('#triggerSubmitButton').on('click', function(){

// Unbind intercept submit event

jQuery('form[id*="survey"]').unbind('submit');

// Click (hidden) real submit button

jQuery('form[id*="survey"] p.normal:last-of-type input[type="submit"]').click();

});

L’intérêt de cette solution réside dans le fait qu’on continue d’empêcher les boutons prev et next d’envoyer le formulaire, ce qui se produirait à la dernière étape si on unbindait l’événement submit sur l’ensemble des boutons et que l’utilisateur décidait, au lieu de soumettre, de repasser à l’étape précédente.

[jQuery] Empêcher un événement (un click) de s’exécuter à plusieurs reprises avec les méthodes On et Off

29/08/2016 / admin

Source : Prevent jQuery events from firing multiple times, ou ma demo qui fonctionne sur jsFiddle.

Problème : ma demo qui ne fonctionne pas sur jsFiddle. J’attribue un événement Click sur un élément (dans ma demo, le lien « Lorem ipsum » par exemple). Lorsque je clique une première fois sur cet élément, l’événement Click se produit une fois. Lorsque je modifie la largeur de la fenêtre (passage à une autre vue) et que je clique une seconde fois sur ce même élément, l’événement Click se produit 2 fois, et ainsi de suite …

Solution :

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).off('click', '#test-button').on('click', '#test-button',function(e) {
        alert('Button click');
    }); 
});

$(document).on('pagebeforeshow', '#index', function(){

$(document).off('click', '#test-button').on('click', '#test-button',function(e) {

alert('Button click');

});

Articles récents

Catégories

Archives

Méta

Étiquette : event

[Magento 2] Gestion des événements et du passage de l’objet This dans les widgets jQuery UI avec les méthodes proxy ou bind

Exemple de widget complet

Autres manières d’utiliser des événements:

Cas d’utilisation de `.bind()` avec `setInterval()`:

Cas avec l’utilisation de matchMedia/mediaCheck

Utiliser la méthode `.bindAll` de Underscore

[Javascript] Attacher plusieurs événements à un même listener

[jQuery] Empêcher un événement de s’exécuter à de multiples reprises avec les méthodes On et Off (entre autres)

Le problème

La solution

[jQuery] Vérifier en cours de saisie en live si un input[type= »text »] contient du contenu avec l’événement Input et la méthode Val

Si un seul champ à vérifier:

Si plusieurs champs à vérifier:

Mieux, avec deux fonctions

[jQuery] Surveiller les changements sur un élément du DOM avec la méthode Bind et l’événement DOMSubtreeModified

[jQuery] Binder l’événement Click sur tous les éléments du DOM sauf un ou plusieurs éléments

Annuler les effets d’event.stopPropagation()

Faire en sorte que le $(document).on(‘click’) n’agisse qu’une fois

[jQuery] Bloquer, jusqu’à sa validation, l’événement Submit dans un formulaire contenant plusieurs boutons

[jQuery] Empêcher un événement (un click) de s’exécuter à plusieurs reprises avec les méthodes On et Off

Exemple de widget complet

Autres manières d’utiliser des événements:

Cas d’utilisation de .bind() avec setInterval():

Cas avec l’utilisation de matchMedia/mediaCheck

Utiliser la méthode .bindAll de Underscore

Le problème

La solution

Si un seul champ à vérifier:

Si plusieurs champs à vérifier:

Mieux, avec deux fonctions

Annuler les effets d’event.stopPropagation()

Faire en sorte que le $(document).on(‘click’) n’agisse qu’une fois

Cas d’utilisation de `.bind()` avec `setInterval()`:

Utiliser la méthode `.bindAll` de Underscore