按钮onClick事件在jQuery Mobile Dialog中触发了太多次 [英] Button onClick event triggered too many times in a jQuery Mobile Dialog
问题描述
我正在使用jQuery Mobile 1.1.1，并使用对话框的。我正在使用该对话框来选择要添加到< ul> 中的元素。我已经在谷歌搜索和搜索类似的问题在SO，但没有运气到目前为止。
I'm using jQuery Mobile 1.1.1 and am using Dialogs. I'm using the dialog to choose which element to add to a <ul>. I've googled and search for similar issue on SO but no luck so far.
要添加多个元素到< ul> 我需要多次打开我的对话框，我试图避免在每次打开该对话框时重新创建该对话框。我的问题是我的 onClick 事件我的 OkButtonPopup 按钮触发太多次（第一次，它触发一次，第二次触发两次，第三次触发3次等等）。
To add multiple elements to the <ul>I need to open my dialog multiple times and I'm trying to avoid having to re-create the dialog each time I open it. My problem is that my onClick event of my OkButtonPopup button triggers too many times (the first time, it triggers once, the second time, it triggers twice, the third time it triggers 3 times and so on...).
我不明白为什么会发生这种情况...
I don't get why this is happening...
以下是（简化）代码给我麻烦。
Below is the (simplified) code that gives me trouble.
<!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>
任何帮助将不胜感激：）
Any help would be much appreciated :)
推荐答案
每当您调用addPopup时，都会继续将Click事件附加到OkButtonPopup，因此事件处理程序被调用了几次。您可以尝试通过绑定附加事件，然后在绑定之前解除绑定。你可以这样做：
Everytime you call addPopup, you keep on attaching the click event to OkButtonPopup, hence, the event handler gets called a couple of times. You can try to attach the event through bind and unbind it prior to binding. You can do it this way:
$('#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());
}
});
或者您也可以在pagehow上附加click事件，而不是在addPopup中执行。这样你只能绑定一次。
Or you can also attach the click event on pageshow instead of doing it in addPopup. That way you bind it only once.
这篇关于按钮onClick事件在jQuery Mobile Dialog中触发了太多次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
