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.

Answer 1

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()

Answer 2

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);