What is blocking the checking of the checkbox?

Question

If you click the second orange "Заказ в 1 клик" button at this page you'll see the form with the checkbox at the bottom. How to figure out what script is blocking the checking of this chackbox? May be it's due to this script:

$("#contactForm_oneclick").click( function(e){
        if(e.target.getAttribute('class') != 'addtocart_button' || e.target.getAttribute('id') == 'agree') {
            return false;
        }
    })

but how to change it correct?

See https://stackoverflow.com/a/4386514/657401. You can either remove all event listeners from an HTML element by cloning it, or you can remove a specific event listener if you have a reference to the listener function (here you don't, the function is anonymous). So unless jQuery keeps the event listener functions stored somewhere public, you cannot do much without modifying the original code or without dropping all the event listeners by cloning he checkbox. — Witiko, Jun 08 '17 at 08:42
I also believe you are correct. In my case I have saved a local copy of the page and then edited custom.js to return true instead of false. I can confirm the checkbox is no longer blocked. The problem is click event bubbling up from the checkbox to its parent. This behaviour can be prevented as you can see here https://stackoverflow.com/questions/1164213/how-to-stop-event-bubbling-on-checkbox-click — derloopkat, Jun 08 '17 at 10:06

Xikura · Answer 1 · 2017-06-08T08:52:34.473

1

You are correct about the snippet being the problem. The last part of your IF is stopping this checkbox from being ticked, below are a simple edit that should work.

$("#contactForm_oneclick").click( function(e){
    if(e.target.getAttribute('class') != 'addtocart_button') {
        return false;
    }
});

Note: I can't find any good reason for the removed part to be there, but it could still affect other parts of the site that I don't know about. Check that your page works as intended before going live with the change.

EDIT: To answer your other question about how to find out what is blocking the checking of this checkbox I'd see this answer about finding all event-listeners attached to a specific DOM-element.

edited Jun 08 '17 at 08:52

answered Jun 08 '17 at 08:44

Xikura

33
8

Thank you. Sorry, suggested code is not working at the local copy of the site. – Boris Garkoun Jun 08 '17 at 09:59
@Boris, have you tried adding a handler to the checkbox for preventing bubbling? – derloopkat Jun 08 '17 at 10:07
@derloopkat, I've modified the custom.js at the live site. please check, did I understand you correct? It seems don't work again. – Boris Garkoun Jun 08 '17 at 11:05
@derloopkat, the reason why I'm using return false; for the case when checkbox is clicked or some nested element of div#contactForm_oneclick is clicked is to prevent execution of this handler: jQuery("#aux").click( function() { jQuery("#contactForm_oneclick").fadeOut(); jQuery("#window").fadeOut(); jQuery("#aux").css("display","none"); jQuery("html,body").css("overflow","auto"); } ); which is hidding form when someone click outside the form – Boris Garkoun Jun 08 '17 at 14:38
@Boris, you can prevent click event to bubble up after it was handled by $("#contactForm_oneclick").click() method. I have published new answer. – derloopkat Jun 08 '17 at 16:39

score 1 · Accepted Answer · answered Jun 08 '17 at 16:42

1

Instead of returning false try to stop event propagation after it was handled.

$("#contactForm_oneclick").click( function(e){
    if(e.target.getAttribute('class') != 'addtocart_button' || e.target.getAttribute('id') == 'agree') {
        e.stopPropagation();
    }
})

That tells the browser not to call click event handlers for the parents of "contactForm_oneclick" div tag. For more information about how event bubbling works, check out this https://en.wikipedia.org/wiki/Event_bubbling

answered Jun 08 '17 at 16:42

derloopkat

6,232
16
38
45

Thank you, derloopkat. It works as it should. I misunderstand only one thing, please explain. Why the tick was being removing if the handler not for checkbox but for parent div was returning false? – Boris Garkoun Jun 09 '17 at 07:03
@Boris, this is something called event bubbling. When you click on a tag this calls click() event for this tag and all its parents. Suppose you have hundreds of tags in your form and want to change background colour of clicked element. Thanks to event bubbling this can be done by adding only one click handler to the form. Then "e.target" is the clicked tag. – derloopkat Jun 09 '17 at 10:34
thank you! I met another task :) How to make the browser to tell the user that he didn't fill some input tag at this popup form? All needed inputs have the "required" attribute, but click at the form's button doesn't make browser prompting to fill some empty input. I think that the problem is in #aux click-handler but I don't understand why and what to do. Please help – Boris Garkoun Jun 09 '17 at 13:18
I suggest to open a new question but you are correct, I see number of changes were performed on that page. Also #aux handlers were added that do not exist in a previous version. Open your browser, go to console and run jQuery('#aux').unbind(); That will remove all handlers attached to #aux. The page seems to work but I ignore why these handlers were added to original version of page. – derloopkat Jun 09 '17 at 14:36

What is blocking the checking of the checkbox?

2 Answers2