JqueryUI - 複数回開いたダイアログ

#btn3を再押せば問題が発生します。その後、#button_create_productダイアログを使ってダイアログを開くと、何度もダブルウィンドウが複写され、#btn3が押されました。 PS $('#button_create_product').unbind("click")products.jsp で説明button_create_productはこれを試してみてください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

毎回製品を作成することができますが、閉じることはできません。ボタンをもう一度クリックすると、それらのすべてが表示され、1つ追加されます。 –

クラス.dialog_create_productに複数のアイテムがありますか？この行$（ '。dialog_create_product'）。dialog（ 'open'）; は、このクラスのすべての要素を開きます。このjQueryコードの背後にあるHTMLコードを表示すると便利です –

Alex、OKを押すとすべてのウィンドウが閉じられ、1つの製品しか作成されませんでした –

あなたが#button_create_productに、#btnに別のclickハンドラをクリックするたびに。その結果、#button_create_productをクリックすると、そのハンドラは複数回実行されます。

コールバック関数から$('#button_create_product').clickコードを取り出して、ページが読み込まれたときに1回だけ実行します。変数を使用して、ボタンがクリックされたかどうかを追跡します。

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

を助けていません。これにより、余分なイベントの発砲が停止します。

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

出典

2016-09-30 14:22:40

いいえ –

JqueryUI - 複数回開いたダイアログ

答えて

関連する問題