Function not working on onclick event?

Question

I've a common function :

function initialize(){
    selectedAttachment();
}

which is first called on ajax success and then after onclick event

Ajax call :

$.ajax({
    url: HTTP_LANYARDS + 'orders/lyPrices',
    dataType: 'json',
    type: 'get',
    beforeSend: function(){
        $('.overlay').show();
    },
    complete: function(){
        $('.overlay').hide();
    },
    success: function(json){
        ajaxData = json;
        initialize();
    if(typeof(editOrder)==='function'){ editOrder(); }//calling edit function
    },
    error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }

});

selectedAttachment function :

function selectedAttachment(){
    $('.lanyardAttachment li').removeClass('selected'); // This statement is working on both (load/onclick) events.
    var radio = $('.lanyardAttachment li .name :radio:checked');
    console.log(radio); // Getting element on load event but not on onclick event.
}

onclick event :

$('body').on('click', '.lanyardAttachment li a', function(){
    $('.lanyardAttachment li input[type="radio"]').attr('checked',false);
    $(this).find('input[type="radio"]').attr('checked',true);
    initialize();
});

Html :

<div class="box">

<div class="selectOptions">
    <label>Attachment: </label>

    <div class="clear"></div>
    <div class="">
        <ul class="lanyardAttachment select-size select-l-color clearfix list-unstyled">

                                <li class="col-lg-2 col-md-2 col-sm-4  col-xs-6 porduct-item selected">
                        <a href="javascript:void(0);">
                            <div class="image">
                                 <img class="cached img-responsive" alt="" src="/wristbandnew/img/AttachmentIcon/att4148682015-04-24.png">        
                            </div>
                            <div class="name">
                                <label for="lblAttachment_2">
                                    <input type="radio" name="lanyardAttachment" id="lblAttachment_2" ref_id="2" ref_title="Bulldog Clip (CL-01)" value="0.00" checked="checked" ref_key="att4148682015-04-24.png">Bulldog Clip (CL-01)</label>
                            </div>
                            <div class="price" ref_id="2"></div>
                        </a>
                    </li>

                               <li class="col-lg-2 col-md-2 col-sm-4  col-xs-6 porduct-item">
                        <a href="javascript:void(0);">
                            <div class="image">
                                 <img class="cached img-responsive" alt="" src="/wristbandnew/img/AttachmentIcon/att5263392015-04-27.png">        
                            </div>
                            <div class="name">
                                <label for="lblAttachment_5">
                                    <input type="radio" name="lanyardAttachment" id="lblAttachment_5" ref_id="5" ref_title="Swivel Hook (CL-02)" value="0.00" ref_key="att5263392015-04-27.png">Swivel Hook (CL-02)</label>
                            </div>
                            <div class="price" ref_id="5"></div>
                        </a>
                    </li>

                               <li class="col-lg-2 col-md-2 col-sm-4  col-xs-6 porduct-item">
                        <a href="javascript:void(0);">
                            <div class="image">
                                 <img class="cached img-responsive" alt="" src="/wristbandnew/img/AttachmentIcon/att1609862015-04-27.png">        
                            </div>
                            <div class="name">
                                <label for="lblAttachment_6">
                                    <input type="radio" name="lanyardAttachment" id="lblAttachment_6" ref_id="6" ref_title="Split Ring (CL-03)" value="0.00" ref_key="att1609862015-04-27.png">Split Ring (CL-03)</label>
                            </div>
                            <div class="price" ref_id="6"></div>
                        </a>
                    </li>

                               <li class="col-lg-2 col-md-2 col-sm-4  col-xs-6 porduct-item">
                        <a href="javascript:void(0);">
                            <div class="image">
                                 <img class="cached img-responsive" alt="" src="/wristbandnew/img/AttachmentIcon/att6526532015-04-27.png">        
                            </div>
                            <div class="name">
                                <label for="lblAttachment_7">
                                    <input type="radio" name="lanyardAttachment" id="lblAttachment_7" ref_id="7" ref_title="Lobster Claw (CL-04)" value="0.00" ref_key="att6526532015-04-27.png">Lobster Claw (CL-04)</label>
                            </div>
                            <div class="price" ref_id="7"></div>
                        </a>
                    </li>

                               <li class="col-lg-2 col-md-2 col-sm-4  col-xs-6 porduct-item">
                        <a href="javascript:void(0);">
                            <div class="image">
                                 <img class="cached img-responsive" alt="" src="/wristbandnew/img/AttachmentIcon/att2032442015-04-27.png">        
                            </div>
                            <div class="name">
                                <label for="lblAttachment_8">
                                    <input type="radio" name="lanyardAttachment" id="lblAttachment_8" ref_id="8" ref_title="Oval Hook (CL-06)" value="0.00" ref_key="att2032442015-04-27.png">Oval Hook (CL-06)</label>
                            </div>
                            <div class="price" ref_id="8"></div>
                        </a>
                    </li>

                               <li class="col-lg-2 col-md-2 col-sm-4  col-xs-6 porduct-item">
                        <a href="javascript:void(0);">
                            <div class="image">
                                 <img class="cached img-responsive" alt="" src="/wristbandnew/img/AttachmentIcon/att6774942015-04-27.png">        
                            </div>
                            <div class="name">
                                <label for="lblAttachment_9">
                                    <input type="radio" name="lanyardAttachment" id="lblAttachment_9" ref_id="9" ref_title="Carabiner Hook (CL-07)" value="0.00" ref_key="att6774942015-04-27.png">Carabiner Hook (CL-07)</label>
                            </div>
                            <div class="price" ref_id="9"></div>
                        </a>
                    </li>


        </ul>
    </div>
    <div class="clear"></div>
</div>

</div>

Now the problem is selectedAttachment function working fine on ajax success but getting empty element on onclick event.

I'm not able to figure out whats going wrong here, any help would be appreciated.

I've mentioned in question, first on ajax success and then on onclick event. — Praveen Dabral
– Praveen Dabral, Commented Apr 30, 2015 at 5:06
but that call is not shared... can you share the function/handler that is calling the method... — Arun P Johny
– Arun P Johny, Commented Apr 30, 2015 at 5:06

Community · Accepted Answer · 2017-05-23 11:51:05Z

2

I think the problem is the use of .attr() to set the value of checked property

$('body').on('click', '.lanyardAttachment li a', function () {
    //this may not be required as all your radios has the same name
    //$('.lanyardAttachment li input[type="radio"]').prop('checked', false);

    //use prop instead of attr
    $(this).find('input[type="radio"]').prop('checked', true);
    initialize();
});

difference between prop() and attr() in jQuery and when to use attr() and prop()

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Apr 30, 2015 at 6:35

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dreamweaver · Accepted Answer · 2015-04-30 05:51:40Z

0

Try This:

function temp() {
        $('.lanyardAttachment li input[type="radio"]').attr('checked',false);
        $(this).find('input[type="radio"]').attr('checked',true);
        initialize();
    }
    $('.lanyardAttachment li a').on('click',temp);

answered Apr 30, 2015 at 5:51

Dreamweaver

1,36611 silver badges21 bronze badges

Collectives™ on Stack Overflow

Function not working on onclick event?

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related