javascript - 函数在 onclick 事件上不起作用？

Question

我有一个常用函数:

function initialize(){
    selectedAttachment();
}

首先在 ajax 成功时调用，然后在 onclick 事件之后调用

Ajax 调用:

$.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);
    }

});

选定的附件功能:

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事件:

$('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>

现在的问题是 selectedAttachment 函数在 ajax 成功时工作正常，但在 onclick 事件上得到空元素。

我无法弄清楚这里出了什么问题，任何帮助将不胜感激。

Answer 1

我认为问题是使用 .attr() 来设置检查属性的值

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