1
attach: function(context, settings) {       
        console.log('enter');
        var element = once('addedtocart', '#addtocart', context);
        element.on('click', function () {
            var product_id = document.getElementById("addtocart").getAttribute("value");            

            var product = GetProductInfo(product_id);
            
            //console.log();
            //attachTitleAndButton(product);
        });
        
    }

below is my libraries.yml

demo-js:
  version: 1.x
  js:
    js/main.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/once

getting below error

Uncaught TypeError: element.on is not a function
    at Object.attach (js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:71:165)
    at js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:22:427
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:22:353)
    at HTMLUListElement.<anonymous> (js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:60:14635)
    at Function.each (js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:3:3129)
    at ce.fn.init.each (js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:3:1594)
    at Drupal.AjaxCommands.insert (js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:60:14565)
    at js_O9oYlgvKhzeW6csP6ljhJ8fkoJHfailxVqOunj38cJ4.js?scope=footer&delta=0&language=en&theme=olivero&include=eJx9UUFywyAM_JAxb-hLMgJUmxQjRgK7_n3BNUnj6eQixK60syyWGLXjkiCMiWliFBlsAyla_O0Cgbuf6Dnq0FB5DJwgxNjBmPE7FwideiIq-Pglg-yScdEG5KJhs1_xGBoo1JZJJ9qQ0SmzKxPIPolPRDesHjfRRx0XciXgIDNxtiV30X5_LEZY_QTZU1SC1ZsD3v8jE_vlLyUIbGe1eYdXLAIzbYPDhXQr6pqYlxSghpOJggHW51k3Vqw5tao6VgS5L7Z-9NXkqedrkhyPV2GakV1VLE2usJK81-SmJ_JiIYMxlV0gwoT8_pe6E3CLj7fzdpzSnR-mXgceVGbEN9Q4U82uvSTmayAjioWEH215MH66JZ9Q9-YH_m0LfQ:60:11020
2
  • Actually the title was not perfectly fine. I fixed it and in the edit comments I explained why.
    – cilefen
    Oct 2, 2023 at 10:34
  • 1
    This isn’t jquery.once library and we don’t usually mention the version in the title. My edit should be restored and the question locked.
    – cilefen
    Oct 2, 2023 at 11:29

3 Answers 3

4

The new once() function from the new v10 core/once library always returns an array of elements (even if the selector matches only a single element). And vanilla JS arrays don't have a .on() function.

So either process the array in a loop

let manyElements = once('addedtocart', '#addtocart', context);
manyElements.forEach(ele => ele.doSomething())

or just shift the first element from the resulting array
(use the null-safe ?. operator to prevent errors if shifting from an empty array)

let singleElement = once('addedtocart', '#addtocart', context).shift();
singleElement?.doSomething()

If you need to run a jQuery-specific function, wrap the result of once() into a jQuery object.

let manyElements = once('addedtocart', '#addtocart', context);
$(manyElements).jQuerySomething();
3

jQuery Once was deprecated in Drupal 9 and removed from Drupal 10. The change record includes a conversion guide.

1
  • @cliefen, I have already have gone through above changes
    – Z CHAMP
    Sep 21, 2023 at 14:31
2

Below code is working for me

if (once('addedtocart', '#addtocart', context).length) {
  $('#addtocart').on('click', function () {
    var product_id = document.getElementById("addtocart").getAttribute("value");            
    var product = GetProductInfo(product_id);
  });
}
2
  • It be nice if you could indicate what has changed.
    – salah-1
    Sep 25, 2023 at 16:09
  • @salah-1 Query Once was deprecated in Drupal 9 and removed from Drupal 10. The change record includes a conversion guide.
    – Z CHAMP
    Oct 2, 2023 at 11:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.