Кнопка внутри всплывающего окна не вызывает событие нажатия вне всплывающего окна

Question

Кнопка внутри всплывающего окна не вызывает событие нажатия вне всплывающего окна

У меня есть пользовательский div, такой как флажок, чтобы установить условие, а также у меня есть всплывающее окно, содержащее кнопку, чтобы вызвать условие.

Тем не менее, я не знаю, почему при запуске события click пользовательского div с помощью кнопки всплывающего окна. это не работает

Это работает нормально, если я запускаю с помощью кнопки вне всплывающего окна.

Вот демонстрация этого: https://jsfiddle.net/yusrilmaulidanraji/ayLamku6/8/

Цвет зеленого прямоугольника должен быть изменен при нажатии кнопки "Всплывающий триггер".

$(".simon-toggle-accepted, .simon-toggle-declined").on("click", function () {
    var value = $(this).data("value");
        var tr = $(this).closest("tr");
    if (value == "Accepted") {
            if ($(this).css("background-color") == "rgb(255, 255, 255)") { //white
                $(this).css("background-color", "green");
                $(this).siblings("div").css("background-color", "white");
            } else {
                $(this).css("background-color", "white");
                $(this).siblings("div").css("background-color", "white");
            }
        }
        else if (value == "Declined") {
            if ($(this).css("background-color") == "rgb(255, 255, 255)") { //white
                $(this).css("background-color", "red");
                $(this).siblings("div").css("background-color", "white");
            } else {
                $(this).css("background-color", "white");
                $(this).siblings("div").css("background-color", "white");
            }
        }
});

$("#trigger").on("click",function (e) {
 e.preventDefault();
 $(".simon-toggle-accepted").trigger("click");
  console.log("Test Trigger");
});

$("#dlg-opt-submit").on("click",function (e) {
 e.preventDefault();
  console.log("Test Popup Trigger");
 $(".simon-toggle-accepted").trigger("click");
  console.log($(".simon-toggle-accepted").length);
 $("#popupLogin").popup("close");
});

.simon-toggle {
    width: 90px;
    height: 30px;
}
.simon-toggle-accepted {
    background-color: white;
    border: 1px solid green;
}
.simon-toggle-declined {
    background-color: white;
    border: 1px solid red;
}
.simon-toggle-ignored, .simon-toggle-accepted, .simon-toggle-declined {
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 2px;
    margin-left: 0.5px;
    margin-right: 0.5px;
}

<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  
  
<div class="simon-toggle">
<div class="simon-toggle-accepted" data-value="Accepted"></div>
<div class="simon-toggle-declined" data-value="Declined"></div>
</div>
<button id="trigger">Trigger</button>

<a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Pop Up</a>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
    <form>
        <div style="padding:10px 20px;">
            <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ">Pop Up Trigger</button>
        </div>
    </form>
</div>

0

jquery jquery-mobile jquery-mobile-popup jquery-mobile-button

Источник

user3097810 17 май '17 в 11:31

2 ответа

Решение

В конце вам нужно заменить этот код. Вы не указали идентификатор кнопки.

<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
      <form>
        <div style="padding:10px 20px;">
            <button id="dlg-opt-submit" type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ">Pop Up Trigger</button>
        </div>
      </form>
    </div>

0

Источник

user3132019 17 май '17 в 11:45

Другие вопросы по тегам jquery jquery-mobile jquery-mobile-popup jquery-mobile-button

user299708 17 май '17 в 11:38 2017-05-17 11:38 · Accepted Answer · 2017-05-17 11:38

Вы не добавили атрибут id к кнопке отправки во всплывающем окне...

$(".simon-toggle-accepted, .simon-toggle-declined").on("click", function () {
    var value = $(this).data("value");
        var tr = $(this).closest("tr");
    if (value == "Accepted") {
            if ($(this).css("background-color") == "rgb(255, 255, 255)") { //white
                $(this).css("background-color", "green");
                $(this).siblings("div").css("background-color", "white");
            } else {
                $(this).css("background-color", "white");
                $(this).siblings("div").css("background-color", "white");
            }
        }
        else if (value == "Declined") {
            if ($(this).css("background-color") == "rgb(255, 255, 255)") { //white
                $(this).css("background-color", "red");
                $(this).siblings("div").css("background-color", "white");
            } else {
                $(this).css("background-color", "white");
                $(this).siblings("div").css("background-color", "white");
            }
        }
});

$("#trigger").on("click",function (e) {
 e.preventDefault();
 $(".simon-toggle-accepted").trigger("click");
  console.log("Test Trigger");
});

$("#dlg-opt-submit").on("click", function (e) {
 e.preventDefault();
  console.log("Test Popup Trigger");
 $(".simon-toggle-accepted").trigger("click");
  console.log($(".simon-toggle-accepted").length);
 $("#popupLogin").popup("close");
});

.simon-toggle {
    width: 90px;
    height: 30px;
}
.simon-toggle-accepted {
    background-color: white;
    border: 1px solid green;
}
.simon-toggle-declined {
    background-color: white;
    border: 1px solid red;
}
.simon-toggle-ignored, .simon-toggle-accepted, .simon-toggle-declined {
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 2px;
    margin-left: 0.5px;
    margin-right: 0.5px;
}

<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  
  
<div class="simon-toggle">
<div class="simon-toggle-accepted" data-value="Accepted"></div>
<div class="simon-toggle-declined" data-value="Declined"></div>
</div>
<button id="trigger">Trigger</button>

<a href="#popupLogin" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Pop Up</a>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
    <form>
        <div style="padding:10px 20px;">
            <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b " id="dlg-opt-submit">Pop Up Trigger</button><!-- this was missing id="dlg-opt-submit" -->
        </div>
    </form>
</div>