Jquery executing at all times - php

Question

I have a dropdown switcher in order to change storeviews. I would like to implement a function done with PHP once an option from the dropdown is clicked.
I have been trying to implement this event via Jquery as below:
<?php if (count($block->getGroups()) > 1): ?>
<div class="switcher store switcher-store" id="switcher-store">
<strong class="label switcher-label"><span><?php /* #escapeNotVerified */
echo __('Select Store') ?></span></strong>
<div class="actions dropdown options switcher-options">
<?php foreach ($block->getGroups() as $_group): ?>
<?php if ($_group->getId() == $block->getCurrentGroupId()): ?>
<div class="action toggle switcher-trigger"
role="button"
tabindex="0"
data-mage-init='{"dropdown":{}}'
data-toggle="dropdown"
data-trigger-keypress-button="true"
id="switcher-store-trigger">
<strong>
<span><?php echo $block->escapeHtml($_group->getName()) ?></span>
</strong>
</div>
<?php endif; ?>
<?php endforeach; ?>
<ul class="dropdown switcher-dropdown" data-target="dropdown">
<?php foreach ($block->getGroups() as $_group): ?>
<?php if (!($_group->getId() == $block->getCurrentGroupId())): ?>
<li class="switcher-option">
<a href="#" data-post='<?= $block->getTargetStorePostData($_group->getDefaultStore()); ?>'>
<?php echo $block->escapeHtml($_group->getName()) ?>
</a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php endif; ?>
<script>
require(['jquery', 'jquery/ui'], function($){
$("#switcher-option").trigger("click", clickConfirm());
function clickConfirm(){
var isGood=confirm('You will lose your cart items if you switch between seasons!');
if (isGood) {
<?php $seasonsHelper->getClearCart(); ?>
} else {
<?php $this->getUrl('*');?>
}
}
});
</script>
The store change works perfectly, but the confirm event appears on different places, not only when I select the dropdown button. If I add to cart, it also appears, when I load the page, It also appears.
I've been trying to accurate identifier with ".class" or "#id" but nothing works.
Is this the proper way to do it?

Answer 1

You need to make some changes to your JS code:
require(['jquery', 'jquery/ui'], function($){
if( $("#switcher-option").lengh>0 ){ /// check for element existance
$("#switcher-option").trigger("click", clickConfirm());
}
function clickConfirm(){
var isGood=confirm('You will lose your cart items if you switch between seasons!');
if (isGood) {
<?php $seasonsHelper->getClearCart(); ?>
} else {
<?php $this->getUrl('*');?>
}
}
});
Note: code is not tested, just shared the logic.