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, Apr 30 '15 at 05:06
but that call is not shared... can you share the function/handler that is calling the method... — Arun P Johny, Apr 30 '15 at 05:06
My assumption is the `selectedAttachment` method is called before the checked state is changed — Arun P Johny, Apr 30 '15 at 05:07
as requested can you share the html so that we can try out what is happening.... — Arun P Johny, Apr 30 '15 at 05:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/76596/discussion-between-tiger-and-arun-p-johny). — Praveen Dabral, Apr 30 '15 at 05:29

score 2 · Accepted Answer · edited May 23 '17 at 11:51

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

score 0 · Answer 2 · answered Apr 30 '15 at 05:51

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 '15 at 05:51

Dreamweaver

1,328
11
21

Function not working on onclick event?

2 Answers2