JQuery不同的对话框没有区别

问题描述 投票:2回答:1

我有1个对话框,但必须有2个不同的操作(保存和编辑)。基于此,应该显示不同的对话框,并且将发生不同的动作操作。我决定用这样的JQuery来解决这个问题:

$(document).ready(function() {

  var dialogEditPartDiv = $('#dialogPart'); // For editing
  var dialogAddPartDiv = $('#dialogPart'); // For saving
  
  $('#addButton').click(function() 
  {
		dialogAddPartDiv.dialog('open');
  });
  
  dialogAddPartDiv.dialog(
  {
	autoOpen: false,
	modal: true,
	buttons:
	{
		'Save part' : function(){}
	},
	beforeClose : function(event) 
	{
		if(!confirm("The part won't be saved. Continue?"))
		{
		return false;
		}
		else 
		{
			
		}
	}
  });
  
  
  $('#editButton').click(function() 
  {
	  dialogEditPartDiv.dialog('open');
  });
  
  dialogEditPartDiv.dialog(
  {
	autoOpen: false,
	modal: true,
	buttons:
	{
		'Save changes' : function(){}
	},
	beforeClose : function(event) 
	{
		if(!confirm("Your changes won't be saved. Continue?"))
		{
		return false;
		}
		else 
		{
		
		}
	}
  });

});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <body>
    <button id="addButton"> +Add </button>
    <button id="editButton"> Edit </button>

    <div id="dialogPart">

    <table>

    <tr>
    <td>Test</td>
    <td><input type="text" size="65" value=""></td>
    </tr>

    <tr>
    <td><input type="text" size="80" value=""></td>
    </tr>

    <tr>
    <td>Test</td>
    <td><input type="text" size="65" value=""></td>
    </tr>

    <tr>
    <td>Test</td>
    <td><input type="text" size="65" value=""></td>
    </tr>

    <tr>
    <td>Test</td>
    <td><input type="text" size="65" value=""></td>
    </tr>

    <tr>
    <td>Test</td>
    <td><input type="text" size="65" value=""></td>
    </tr>

    <tr>
    <td>Test</td>
    <td><input type="text" size="65" value=""></td>
    </tr>

    <tr>
    <td><input type="text" size="80" value=""></td>
    </tr>

    <tr>
    <td>Test</td>
    <td><input type="text" size="65" value=""></td>
    </tr>

    <tr>
    <td>Test</td>
    <td><input type="text" size="65" value=""></td>
    </tr>

    <tr>
    <td>Test</td>
    <td><input type="text" size="65" value=""></td>
    </tr>

    <tr>
    <td>Test</td>
    <td><input type="text" size="65" value=""></td>
    </tr>

    <tr>
    <td>Test</td>
    </tr>

    <tr>
    <td>Test</td>
    <td><input type="text" size="65" value=""></td>
    </tr>

    <tr>
    <td>Test</td>
    <td><input type="text" size="65" value=""></td>
    </tr>

    </table>

    </div>
    </body>

但它并不像预期的那样工作。现在,忽略“添加”按钮并始终显示“编辑”对话框。为什么?

javascript jquery html css dialog
1个回答
0
投票

您每次都在调用相同的对话框,您需要使每个对话框都是唯一的。 I went to the documentation here,页面底部,我在附加代码中创建了两个对话框,运行它以查看它是如何工作的,然后您可以将其应用于您的代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dialog demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>

<button id="opener2">open the dialog2</button>
<div id="dialog2" title="Dialog Title">I'm a dialog2</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});

$( "#dialog2" ).dialog({ autoOpen: false });
$( "#opener2" ).click(function() {
  $( "#dialog2" ).dialog( "open" );
});
</script>
 
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.