JqueryUI - 多次打開對話框

當我重新按#btn3時出現問題。之後，當我用#button_create_product打開對話窗口時，對話窗口的複製次數與按下的次數相同#btn3。在products.jsp PS $('#button_create_product').unbind("click")描述並不能幫助JqueryUI - 多次打開對話框

$('#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>

來源

2016-09-30 Bogdan Shulga

它可能是它每次創建產品，並且只關閉它隱藏它？所以當你再次點擊按鈕時，它會顯示所有這些按鈕並添加一個？ –

是否有多個項目與類.dialog_create_product？這一行$（'。dialog_create_product'）。dialog（'open'）; 將打開此類的所有元素。顯示這個jQuery代碼背後的HTML代碼將是有幫助的 –

亞歷克斯，當確定按下時，所有的窗戶被關閉，並創建一個產品 –

每次點擊#btn，另一個click處理程序#button_create_product。因此，當您單擊#button_create_product時，該處理程序會多次運行。

將$('#button_create_product').click代碼從回調函數中取出，並且只在頁面加載時執行一次。使用變量來追蹤按鈕是否被點擊。

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; 
    }); 
});

來源

2016-09-30 15:59:10 Barmar

請嘗試這樣做的button_create_product。這會阻止你額外的事件發射。

$(".btn3").click(function(event) { 
    event.stopImmediatePropagation(); 
    //Do Stuff 
});

來源

2016-09-30 14:22:40

沒有不工作 –

JqueryUI - 多次打開對話框

回答

相關問題