JqueryUI - Dialog open multiple times
Question
the problem occurs when I re-press #btn3 . After that, when i open the dialog using #button_create_product dialogue window is duplicated as many times as was pressed #btn3 . The button_create_product described in products.jsp PS $('#button_create_product').unbind("click") doesn't help
$('#btn3').click(function () {
$('#menu').load("products.jsp",function () {
$('#button_create_product').click( function() {
$('.dialog_create_product').dialog('open');
});
$( ".dialog_create_product" ).dialog({
autoOpen: false,
width: 800,
buttons: {
OK: function() {
$(".dialog_create_product").dialog("close")
},
CANSEL: function() {
$(".dialog_create_product").dialog("close")
}
},
});
});
});
Html
<body class="products">
<button id = "button" class="remove">Удалить выделенное</button>
<button id = "button_create_product" class="button_create_product">Добавить продукт</button>
<hr>
<table id="products_table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>id</th>
<th>Категория</th>
<th>Производитель</th>
<th>Название</th>
<th>Штрихкод</th>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th class="searchable">Каталог</th>
<th class="searchable">Производитель</th>
<th class="searchable">Название</th>
<th class="searchable">Штрихкод</th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
<div class="dialog_create_product" title="Создать продукт" hidden>
<table align="center" border="0" cellpadding="5" cellspacing="0" style="width: 70%">
<tbody>
<tr>
<td>
<select class="selectCategory" style="width: 100%">
</select>
</td>
</tr>
<tr>
<td><input class="prodName" placeholder="Название" type="text" style="width: 100%" maxlength="50"></td>
</tr>
<tr>
<td><input class="prodProvider" placeholder="Производитель" type="text" style="width: 100%" maxlength="50"></td>
</tr>
<tr>
<td><input class="prodCode" placeholder="штрих-код" type="text" style="width: 100%" maxlength="50"></td>
</tr>
</tbody>
</table>
<table class="sostav" align="center" border="0" cellpadding="2" cellspacing="2" style="width: 700px">
<tbody>
<tr>
<td width="50%" align="center"><b>Компоненты</b><hr></td>
<td width="50%" align="center"><b>Состав</b><hr></td>
</tr>
<tr>
<td class = "components" height="200px" valign="top"></td>
<td class = "compound" height="200px" valign="top"></td>
</tr>
</tbody>
</table>
<div class="divInput"align="center">
<input class = "getInputComponent" placeholder="название компонента" type="text" maxlength="50"><button class="addComponent" >Добавить компонент</button>
</div>
</div>
</body>
2 answers
solution1
0 2016-09-30 14:22:40
Please try this. this will stop your extra event firing.
$(".btn3").click(function(event) {
event.stopImmediatePropagation();
//Do Stuff
});
solution2
0 ACCPTED 2016-09-30 15:59:10
Every time you click on #btn , another click handler to #button_create_product . As a result, when you click on #button_create_product , that handler runs multiple times.
Take the $('#button_create_product').click code out of the callback function, and just do it once when the page is loaded. Use a variable to track whether the button has been clicked.
var button_clicked = false;
$('#button_create_product').click( function() {
if (button_clicked) {
$('.dialog_create_product').dialog('open');
}
});
$( ".dialog_create_product" ).dialog({
autoOpen: false,
width: 800,
buttons: {
OK: function() {
$(".dialog_create_product").dialog("close")
},
CANSEL: function() {
$(".dialog_create_product").dialog("close")
}
},
});
$("#btn3").click(function() {
$('#menu').load("products.jsp",function () {
button_clicked = true;
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.