gpt4 book ai didi

javascript - 按钮 onClick 事件在 jQuery Mobile 对话框中触发了太多次

转载 作者:行者123 更新时间:2023-11-29 17:22:37 24 4
gpt4 key购买 nike

我正在使用 jQuery Mobile 1.1.1 并且正在使用 Dialogs .我正在使用对话框选择要添加到 <ul> 的元素.我已经在 SO 上搜索并搜索了类似的问题,但到目前为止没有运气。

将多个元素添加到 <ul>我需要多次打开我的对话框,我试图避免每次打开它时都必须重新创建对话框。我的问题是我的 onClick我的事件OkButtonPopup按钮触发次数过多(第一次触发一次,第二次触发两次,第三次触发3次,以此类推...)。

我不明白为什么会这样......

下面是给我带来麻烦的(简化的)代码。

<!doctype html>
<html>

<head>
<title>Problem with Dialog re-use</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>

<body>
<div data-role="page">
<div data-role="header">
<h1>Problem with Dialog re-use</h1>
</div>
<div data-role="content">
<p><h2>Activated by</h2></p>
<ul id="activate_ul">
<!-- li to be added dynamically-->
</ul>
<a href="javascript:addPopup()" data-rel="popup" data-role="button">Add</a>
</div>
</div>
<div id="myDialog" data-role="dialog">
<div data-role="header" data-theme="d">
<h1>My Elements</h1>
</div>
<div id="myDialogContent" data-role="content" data-theme="c">
<p>Element Type</p>
<select id="element-type">
<!-- options to be added dynamically-->
</select>
<p>Element Name</p>
<select id="element-list">
<!-- options to be added dynamically-->
</select>
<a href="#" id="OkButtonPopup" data-role="button" data-rel="back" data-theme="b">Ok</a>
</div>
</div>
<script type="text/javascript">
var all_inputs = ["myInput1","myInput2","myInput3","myInput4"];
var all_outputs = ["myOutput1","myOutput2","myOutput3","myOutput4"];
var all_zones = ["myZone1","myZone2","myZone3","myZone4"];

function updateInputList() {
$('#element-list').empty();
for (var i = 0; i < all_inputs.length; i++ ) {
$('#element-list').append('<option value="'+all_inputs[i]+'">'+all_inputs[i]+'</option>');
}
}

function updateOutputList() {
$('#element-list').empty();
for (var i = 0; i < all_outputs.length; i++ ) {
$('#element-list').append('<option value="'+all_outputs[i]+'">'+all_outputs[i]+'</option>');
}
}

function updateZoneList() {
$('#element-list').empty();
for (var i = 0; i < all_zones.length; i++ ) {
$('#element-list').append('<option value="'+all_zones[i]+'">'+all_zones[i]+'</option>');
}
}

function removeByValue(arr, val) {
for(var i=0; i<arr.length; i++) {
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
}

function addPopup() {
$('#element-type').empty();
$('#element-type').append('<option value="Input">Input</option>')
.append('<option value="Output">Ouput</option>')
.append('<option value="Zone">Zone</option>');

updateInputList();

$('#element-type').change();

$('#element-type').on("change", function() {
if ($("option:selected", this).attr('value') == "Input") {
updateInputList();
}
if ($("option:selected", this).attr('value') == "Output") {
updateOutputList();
}
if ($("option:selected", this).attr('value') == "Zone") {
updateZoneList();
}

$('#element-list').selectmenu('refresh');
});

// Event triggered too many times!! Why???
$('#OkButtonPopup').on("click", function() {
$('#activate_ul').append('<li>' + $('#element-list').val() +'</li>');

// remove element from corresponding array
if ($('#element-type').val() == 'Input' ) {
removeByValue(all_inputs, $('#element-list').val());
}
if ($('#element-type').val() == 'Output' ) {
removeByValue(all_outputs, $('#element-list').val());
}
if ($('#element-type').val() == 'Zone' ) {
removeByValue(all_zones, $('#element-list').val());
}
});

$.mobile.changePage("#myDialog", { role: "dialog" });
}
</script>
</body>
</html>

任何帮助将不胜感激:)

最佳答案

每次调用 addPopup 时,都会将点击事件附加到 OkButtonPopup,因此,事件处理程序会被调用几次。您可以尝试通过绑定(bind)附加事件并在绑定(bind)之前解除绑定(bind)。你可以这样做:

$('#OkButtonPopup').unbind("click").bind("click", function() {
$('#activate_ul').append('<li>' + $('#element-list').val() +'</li>');

// remove element from corresponding array
if ($('#element-type').val() == 'Input' ) {
removeByValue(all_inputs, $('#element-list').val());
}
if ($('#element-type').val() == 'Output' ) {
removeByValue(all_outputs, $('#element-list').val());
}
if ($('#element-type').val() == 'Zone' ) {
removeByValue(all_zones, $('#element-list').val());
}
});

或者您也可以在 pageshow 上附加点击事件,而不是在 addPopup 中进行。这样你只绑定(bind)一次。

关于javascript - 按钮 onClick 事件在 jQuery Mobile 对话框中触发了太多次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11673384/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com