Question

我正在尝试更改检查状态，以及使用jQuery删除并添加动态创建的DOM的类（尽管失败了），该功能是：

$('body').on('change', '.steam_bot_trade', function() {
        form = $(this).parents('div.steamBotTrade').first();
        bot_trade = $(this);
        if(form.hasClass('bot-trade')){
            swal({
                title: "Are you sure?",
                text: "Transactions made outside our system will not be protected and are more prone to scams.",
                type: "error",
                confirmButtonClass: "btn-danger",
                confirmButtonText: "Yes!",
                showCancelButton: true
            }, function() {
                //on okay
                bot_trade.checked = false;
                form.removeClass('bot-trade');
            }, function() {
                //on cancel
                bot_trade.checked = true;
            });
        } else {
            bot_trade.checked = true;
            form.addClass('bot-trade');
        }
        console.log(bot_trade.checked);
    });

尽管调用了removeClass或addClass form.hasClass('bot-trade') bot_trade.checked`，但doesn't seem to be running along with the都可以正常工作

在函数中执行console.log(bot_trade)时，它返回C.fn.init [input#steam_bot_trade.steam_bot_trade]，所以我对为什么addClass或removeClass不起作用感到困惑？

动态HTML DOM如下

<form action="" class="sellSteam" id="sell-panel-form" method="POST" style="display:none;">
    <div class="panel-heading sell">
        <div class="background-pattern" style="background-image: url('{{ asset('/img/game_pattern.png') }}');"></div>
        <div class="bg-color"></div>
        <div class="panel-heading-listing-form-content flex-center-space">
            <div>
                <h3 class="panel-title"><i class="fab fa-steam-symbol" style="margin-right:10px;"></i><span class="hidden-xs-down"> {{ trans('listings.form.sell_title') }}: {item_name}</span></h3>
            </div>
            <div class="steamBotTrade flex-center bot-trade">
                {{-- Suggestion switch --}}
                <div class="suggestion-text m-r-10">Steam Bot Trade</div>
                <label class="suggestion-switch m-r-10">
                    <input id="steam_bot_trade" name="steam_bot_trade" class="steam_bot_trade" type="checkbox" {{ ( (isset($listing) && $listing->steam_bot_trade) ? 'checked' : '') }}checked>
                    <div class="slider round"></div>
                </label>
            </div>
        </div>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-1 steam-item">
                <div class="square-responsive bg_3d pointer">
                    <img class="square-content img-responsive" src="{item_picture}">
                </div>
            </div>
            {{-- div[id=priceFields] used just for showing security token after submitting price --}}
            <div id="priceFields">
                <div class="col-md-4">
                    <label>{{ trans('listings.form.sell.we_recommed') }} <strong><span class="text-danger">*</span></strong></label>
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon">
                            <span>{{ Currency(Config::get('settings.currency'))->getSymbol() }}</span>
                        </span>
                        {{-- Price Input --}}
                        <input type="text" class="form-control rounded input-lg inline input price" data-validation="number,required" data-validation-ignore=",,." data-validation-error-msg='<div class="alert dark alert-icon alert-danger" role="alert"><i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i> {{ trans('listings.form.validation.price') }}</div>' data-validation-error-msg-container="#price-error-dialog" name="recommended_price" id="recommended_price" autocomplete="off" value="{item_price}" placeholder="{{ trans('listings.form.placeholder.sell_price',  ['currency_name' => Currency(Config::get('settings.currency'))->getName()]) }}" readonly/>
                    </div>
                </div>
                <div class="col-md-4">
                    <label>{{ trans('listings.form.sell.price') }} <strong><span class="text-danger">*</span></strong></label>
                    <div class="input-group input-group-lg">
                        <span class="input-group-addon">
                            <span>{{ Currency(Config::get('settings.currency'))->getSymbol() }}</span>
                        </span>
                        {{-- Price Input --}}
                        <input type="text" class="form-control rounded input-lg inline input price" data-validation="number,required" data-validation-ignore=",,." data-validation-error-msg='<div class="alert dark alert-icon alert-danger" role="alert"><i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i> {{ trans('listings.form.validation.price') }}</div>' data-validation-error-msg-container="#price-error-dialog" name="price" id="price" autocomplete="off" value="{{(isset($listing) ? ($listing->price > 0 ? $listing->price : null) : null)}}" placeholder="{{ trans('listings.form.placeholder.sell_price',  ['currency_name' => Currency(Config::get('settings.currency'))->getName()]) }}" required/>
                    </div>
                </div>
            </div>
            <div class="col-md-1 addListingButton" style="float:right;">
                <label>&nbsp;</label>
                <input type="hidden" name="listing_id" value="{listing_id}">
                <button class="btn btn-lg btn-success sellSteamButton" type="submit" id="submit-button" style="float: right!important;"><i class="fa fa-plus"></i> Add Listing</button>
            </div>
        </div>
    </div>
    <hr>
</form>

Answer 1

.checked是DOM元素的属性。如果要使用jQuery进行修改，则必须使用.prop()方法。尝试.prop('checked', true);或.prop('checked', false);。更多http://devdocs.io/jquery/prop

干杯。

动态元素未定义？

1 个答案: