弹出窗口内的按钮不会触发弹出窗口外的点击事件
Posted
技术标签:
【中文标题】弹出窗口内的按钮不会触发弹出窗口外的点击事件【英文标题】：Button inside popup doesn't trigger click event outside the popup 【发布时间】：2017-10-16 20:16:53 【问题描述】：我有一个自定义 div，例如用于设置条件的复选框，还有一个包含触发条件的按钮的弹出窗口。
但是，我不知道为什么，当从弹出的按钮触发自定义div的点击事件时。它不起作用。
如果我使用弹出窗口外的按钮触发它，它工作正常。
这是它的演示： https://jsfiddle.net/yusrilmaulidanraji/ayLamku6/8/
点击“Pop Up Trigger”按钮时，绿色矩形的颜色应该会改变。
$(".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>【问题讨论】：
【参考方案1】：您没有在弹窗中的提交按钮中添加 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>【讨论】：
【参考方案2】：最后，您需要替换此代码。您没有包含按钮的 ID。
<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>【讨论】：
以上是关于弹出窗口内的按钮不会触发弹出窗口外的点击事件的主要内容，如果未能解决你的问题，请参考以下文章
用jquery代码如何实现当我点击“查看”按钮时，在弹出窗口或弹出页面，显示数据库的详细数据
一个弹出div，当点击页面上除了这个div这外的地方，隐藏这个div，jquery怎么写??