Dynamic element undefined?

Question

I'm trying to change the checked status, along with removing & adding a class of a dynamically created DOM using jQuery although it's failing, the function is:

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

Both the form.hasClass('bot-trade') works correctly, although removeClass or addClassdoesn't seem to be running along with thebot_trade.checked` call

When doing console.log(bot_trade) inside the function it's returning C.fn.init [input#steam_bot_trade.steam_bot_trade] so I'm confused as to why the addClass or removeClass doesn't work?

The dynamic HTML DOM is as follows

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

• Tomalak: bot_trade is a jQuery object. There is no .checked on jQuery objects. Get into the habit of prefixing all jQuery objects with $ - so use $bot_trade - then it becomes obvious that .checked is a mistake.
• Tomalak: Also you are not using the var keyword. That means all variables you create are top-levels globals. This is always a bug. Never create variables without var.
• manan5439: can i show your html
• Curtis: @manan5439 I've added my HTML dom

Answer 1

.checked is a property of DOM element. If you want to modify it using jQuery you have to use .prop() method. Try .prop('checked', true); or .prop('checked', false);. More here http://devdocs.io/jquery/prop

Cheers.

• Tomalak: It's better to link to official documentation as much as possible: api.jquery.com/prop
• Curtis: Perfect this works, but removeClass & addClass doesn't appear to be working still
• Damian Dziaduch: @Curtis can you please do console.log(form) and show us the output? Code looks valid :) Maybe the code could not find the element...