CODEWITHSUNDEEP
jquery
sledgeweight
sledgeweight

Reputation: 8105

Cannot match/ find all selectors in cloned parent elements - Jquery

http://jsfiddle.net/LGLtY/

Im supposed to target or reference a parent selector in order to find all the select options inside a set of cloned divs. And what i want to do is add up all the values in all the drop downs within the #rooms div and create an alert after a certain amount is selected. I can clone required sections but value adding up only works in the first.

These variables are set onlclick

 var num = $( '.clonedInput' ).length;      
 var newNum = new Number( num + 1 );
 var $newElem = $( '#field' + num );
 var newElemCloned = $newElem.clone(true).prop( 'id',  'field' + newNum );

I've tried integrating these into the function starting:

$('#rooms').find('select').change ......

I'm I going about this in the right way or would it be better to use something other than change to find all select elements im after? Any help appreciated.

Upvotes: 0

Views: 61

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388416

need to use Event Delegation!!!

$('#room').on('change', 'select', function () {
    var sum = 0;
    $('#room select').each(function () {
        sum += Number($(this).val());
    });
    if (sum > 5) {
        $(this).siblings().prop('disabled', 'disabled');
        $('.addRoom').prop('disabled', 'disabled');
        $('button[type="submit"]').prop('disabled', 'disabled').addClass('disabled');
    } else {
        $(this).siblings().prop('disabled', false);
        $('.addRoom').prop('disabled', false);
        $('button[type="submit"]').prop('disabled', false).removeClass('disabled');
    }
});

Demo: Fiddle

Upvotes: 0

kei
kei

Reputation: 20511

DEMO

The key thing here is using jQuery on so that your subsequent selects have event handlers attached to them.

$("#room").on("change","select",function(){
    //Rest of your stuff here
    ...

The next thing to do is to trigger this event when you add a new room.
Add $("select","#room").first().trigger("change"); at the end of your add function.
The first() is important as you don't want multiple alerts.

Upvotes: 1

Related Questions