Checkbox doesn't work in replaced content

Question

So I'm having some weird behaviours in my code and I don't know why.

I'm using uniformjs so, for example a checkbox is like this:

<label>Check Boxes</label>
    <div class="input_group">
      <div class="checker"><span><input style="opacity: 0;" name="option" value="option 1" type="checkbox"></span></div>First option<br>
      <div class="checker"><span><input style="opacity: 0;" name="option" value="option 2" type="checkbox"></span></div>Second option<br>
      <div class="checker"><span><input style="opacity: 0;" name="option" value="option 3" type="checkbox"></span></div>Third option
    </div>

So, when the check option is checked the parent span add the class "checked".

So I was trying to develop a system in which an user is able to add an user and choose between creating a new address for that user or use the company one.

Both address are loaded in diferent divs and the company one get hidden so that's the function I made:

$('input[name="company_addr"]').change(function(){
            var checked = $(this).is(':checked');
            $('input[name="company_addr"]').each(function(){
                $(this).attr('checked',checked);
                if (checked)
                    $(this).parent().addClass('checked');
                else
                    $(this).parent().removeClass('checked');
            });
            if (checked){
                newAddrContent = block_new.html();
                block_new.html(block_company.html());
            }
            else{
                block_new.html(newAddrContent);
            }
        });

If I delete the last if ... else and unhide the company address I see how both checks change so that part works flawlessly.

However the checkbox within block_new doesn't work anymore but the block_company one does. If I click on the company (which should be hidden) one the other one doesn't uncheck or check but the content is properly replaced.

What could be going on?

score 0 · Answer 1 · answered Sep 02 '11 at 20:49

0

You use check() which is one time function. You must bind a live event with .live(event, function) in order for the handler to work on the future elements.

So simply instead of:

$(elements).change();

use

$(elements).live('change', function() {
...
});

answered Sep 02 '11 at 20:49

lukas.pukenis

13,057
12
47
81

This worked for once more time. I click, it shows the Company Address, click again shows again the fields to be filled but the checkbox it's still checked (wrong) and now I can't use it anymore... – Antonio Laguna Sep 02 '11 at 20:57

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

The problem is when you create a new input on the fly the change event is not being rebound. You can fix this by using .delegate Docs

$('.input_group').delegate('input[name="company_addr"]', 'change', function(){
             //do your stuff
});

Reasons to use delegate over live

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 02 '11 at 20:49

Loktar

34,764
7
90
104

What should input parents be? – Antonio Laguna Sep 02 '11 at 20:58
in your case it would be `input_group` just changed my answer to reflect that as well. – Loktar Sep 02 '11 at 21:05
I've tried but it doesn't change anything I mean, the behaviour it's still the same. I'm using uniformjs to style the elements may be for that? I've tried to call $.uniform.update(); too but seems not to solve anything it's like the element loose all it's functionallity once it's changed – Antonio Laguna Sep 02 '11 at 21:10
Finally seems to be a bug with uniformjs check here -> https://github.com/pixelmatrix/uniform/issues/180 What should I do with the answer? – Antonio Laguna Sep 02 '11 at 22:53
Up to you, you dont have to accept any, you can actually add what you found out as an answer to your own question and accept it. – Loktar Sep 03 '11 at 00:42

score 0 · Accepted Answer · answered Sep 03 '11 at 10:46

Finally seems to be a bug with uniformjs commented here: github.com/pixelmatrix/uniform/issues/180

If anyone is interested in how I managed to solve this issue, I just changed the method to show, hide the proper divs so, when submitting the form I check which div is hidden and handle the form with this into account.

Checkbox doesn't work in replaced content

3 Answers3