.on('click', function () { во всплывающем окне
По клику на кнопку открывается всплывающее окно
$('.modal-js').on('click', function () {...}
В этом окне есть инпут с классом "cart_auth_username", события в котором мне надо отлавливать. Строка
$(document).on('change', 'input.cart_auth_username', function () {
console.log(123)
}
работает не корректно, что проявляется в том, что событие срабатывает не в момент изменения инпута, а момент клика мышкой на любом месте. Причём в консоль после этого выводятся 2 строчки
123
123
Строка $(document).on('change', 'input.cart_aut.... не вложена $('.modal-js').on('click', function () {сюда}, а расположена отдельно.
В чём причина ошибки?
//модалка
$('.modal-js').on('click', function () {
var provider_id = $('.mj').data('provider_id');
//обновляем от предыдущего закрытия
$('#step2_' + provider_id).css({'display': 'block'});
if (CatalogComponent.clientName == '') {
clear23(provider_id);
hide23(provider_id);
}
var recid = $(this).data('user_id');
var el = $('#rec' + recid);
var popup = el.find('.t-popup');
var valmod = el.find('.valmod');
popup.css({'display': 'flex', 'justify-content': 'center', 'align-items': 'center', 'cursor': 'default'});
valmod.css({'background-color': 'rgba(255,255,255,1)', 'width': '100%', 'height': '98%', 'overflow-y': 'auto', 'overflow-x': 'hidden'});
setTimeout(function () {
popup.find('.t-popup__container').addClass('t-popup__container-animated');
popup.addClass('t-popup_show');
}, 50);
unblock1();
$('body').addClass('t-body_popupshowed');
el.find('.t-popup').mousedown(function (e) {
var windowWidth = $(window).width();
var maxScrollBarWidth = 17;
var windowWithoutScrollBar = windowWidth - maxScrollBarWidth;
if (e.clientX > windowWithoutScrollBar) {
return;
}
if (e.target == this) {
t778_closePopup();
}
});
el.find('.t-popup__close, .t778__close-text').click(function (e) {
t778_closePopup();
});
$(document).keydown(function (e) {
if (e.keyCode == 27) {
t778_closePopup();
}
});
});
$(document).on('change', 'input.cart_auth_username', function () {
var self = $(this);
var user_id = $(this).data('user_id');
var max = 17;
var press = $(this).val().replace(/_/gi, '').length;
var step, answer;
var text = 'этот номер не зарегистрирован в базе. Оформить заказ на этот номер?';
console.log(max);
// console.log(press);
if (max == press) {
var phone = $(this).val();
CatalogComponent.clientPhone = phone;
clear123(user_id);
$.ajax({
..........
});
}
});
html
<div id="cart_info_<?=$prov->provider_id?>" class="t812__col t-col t-col_4" style = "width:100%; color: #f7cd00;">
<div class="t812__pricelist-item_box">
<div class="t812__pricelist-item__row_1 t-row" style="flex-wrap:wrap; padding-bottom: 0px;">
<div class="t812__pricelist-item__title t-name t-name_sm" style="text-transform:uppercase; color: #f7cd00; width: 100%;">
...
<div id="order_true_<?=$prov->provider_id?>" style="display: <?=$display2?>">
<div class="button_order_checkout modal-js" data-user_id ="<?=$prov->provider_id?>" style="margin: 30px auto; width: 150px;">
<span style="text-align: center; font-size: 0.7em; color: #f7cd00;">Оформить заказ</span>
</div>
</div>
</div>
</div>
<div class="t812__pricelist-item__line" style="height: 0.4px; background-color: #F7Cd00; opacity: 0.6; margin:0 0 15px 0;"></div>
<!--модалка-->
<div id="rec<?=$prov->provider_id?>" data-provider_id="<?=$prov->provider_id?>" class="r t-rec mj scrolbar" data-record-type="754" >
<div class="t-popup" >
<div class="valmod">
<div class="t-popup__close my_popup__close">x</div>
<!--t547-->
<div class="t547">
<div class="t-section__container t-container">
<div class="t-col t-col_12">
<div class="t-section__topwrapper t-align_center">
<div class="t-section__title t-title t-title_xs" field="btitle">Оформление заказа на <?=$prov->name_company?></div>
</div>
</div>
</div>
<div class="t-container t547__container" style="margin-bottom:150px;">
<div class="t547__item" id="step1">
<div class="t-width t-width_12 t547__mainblock">
<div class="t547__col">
<div class="t547__block">
<div class="t547__title t-name t-name_lg">Идентификация</div>
<div class="t547__descr t-text t-text_xs">
<?php
if (Yii::$app->user->isGuest){
echo 'Введите ваш телефон или авторизируйтесь';
echo yii\widgets\MaskedInput::widget([
'name' => 'phone',
'mask' => '+380(99)-999-9999',
'options' => [
'class' => 'cart_auth_username form-control',
'data-user_id' => $prov->provider_id,
'placeholder' => 'введите номер телефона'
],
]);
echo Html::tag('div',null, ['style' => ['display' => 'none', 'margin'=>'15px 0 0 2px'], 'id' => 'caur_'.$prov->provider_id, 'class' => 'caur']);
echo Html::tag('div',
Html::tag('span','Укажите ФИО полностью. Эти данные используются при оформлении отгрузок на службе доставки.', ['class' => 'migo'])
.$inputs['fam']
.$inputs['name']
.$inputs['otch']
.Html::tag('div',null,['style' => ['display' => 'none', 'margin'=>'15px 0 15px 2px'], 'id' => 'step_1_finish_'.$prov->provider_id])
.Html::tag('span','далее→', ['style' => ['pointer-events' => 'none', 'opacity' => '0', 'display' => 'table-cell', 'padding' => '10px !important'], 'data-answ' => 'next', 'id' => 'step_1_next_'.$prov->provider_id, 'class' => 'button_order_checkout boc-js']),
['style' => ['display' => 'none', 'margin'=>'15px 0 0 2px'], 'id' => 'caur2_'.$prov->provider_id, 'class' => 'caur']);
} else {
$user_photo = Yii::$app->user->identity->photo ? '<img src="'.Yii::getAlias('@img/users/'.Yii::$app->user->identity->photo).'" title = "'.Yii::t('app','photo').' '.Yii::$app->user->identity->username.'" alt="'.Yii::$app->user->identity->username.'" style="width: 50px; height: 50px; border: thin solid #f7cd00; border-radius: 3px; margin: 0 5px 0 0; vertical-align: text-top; box-shadow: 0 0px 8px rgba(0,0,0,0.4);">' : null;
echo '
<div id="step_1_finish_"'.$prov->provider_id.' style="margin: 15px 0px 0px 2px; opacity: 1;">
заказ будет оформлен на <br>'.$user_photo.'
<strong>'.Yii::$app->user->identity->username.'</strong><br>
<strong>'.Yii::$app->user->identity->phone.'</strong>
</div>';
$display_step2 = 'display:block;';
?>
<script>
$(document).ready(function(){
$('#step2_'+<?=$prov->provider_id?>).animate({"height" : "show"}, 500);
CatalogComponent.client_id = '<?=Yii::$app->user->identity->id?>';
CatalogComponent.clientPhone = '<?=Yii::$app->user->identity->phone?>';
CatalogComponent.clientName = '<?=Yii::$app->user->identity->username?>';
CatalogComponent.sellerPhone = '<?=Yii::$app->user->identity->phone_who_invited?>';
});
</script>
<?php
}
?>
</div>
</div>
</div>
<div class="t547__line" style="background-color:#e0e0e0;">
<div class="t547__circle"></div>
</div>
</div>
</div>
......
.......
</div>
</div>
</div>
</div>
</div>
<!--/модалка-->
</div>
</div>