0

我在处理 JQuery 时遇到了关键问题。

是否$(this).dialog('close');删除绑定显示的内容？如果是，那么我该如何防止这种情况。

下面是我的代码。

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function cool_function(event){
    //alert(event.data.param1);

    alert($('#'+event.data.param2).html());

    //var dialog = $('#'+event.data.param2).children('#content').html();
    $('#'+event.data.param2).children('#content').dialog({
                    model : true,
                    autoOpen: true,
                    buttons: {
                        "Save": function() {
                            alert('Content Will be Saved');

                        },
                        "Cancel":  function() {
                            $(this).dialog('close');
                        }
                    }
                });

    $('#'+event.data.param2).children('#content').dialog('open');
}
</script>
</head>
<body>
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>johndoe1</td>
<td class="click" id="clickTest1">
    <script>
    $("#clickTest1").click({param1: "Hello Darshak", param2: "clickTest1"}, cool_function);
    </script>
    <div>
        <img id='' src="gray.jpg"/>
    </div>
    <div id='content' title='John Doe' style="display:none;">
        <div><textarea>Hello this is Text Area</textarea></div>
    </div>
</td>
</tr>
<tr>
<td>Ketan B</td>
<td>ketan.b@example.com</td>
<td>ket1</td>
<td class="click" id="clickTest2">
    <script>
    $("#clickTest2").click({param1: "Hello Ketan", param2: "clickTest2"}, cool_function);
    </script>
    <div>
        <img id='' src="gray.jpg"/>
    </div>
    <div id='content' title='Ketan B' style="display:none;">
        <div><textarea>One more text area Hurrey!!!</textarea></div>
    </div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

现在的问题是，当我第一次加载页面时检查代码中的警报。警报会给我整个 div 代码，包括contentid 代码。

一旦content显示在对话框栏上，我关闭或取消该对话框，然后尝试再次单击相同的第一行，它根本没有contentdiv，我无法再次获得对话框。

下面是屏幕截图，以便更好地理解它。

对话框 1

在此处输入图像描述

当我单击评论图像时，仅第一次显示对话框

在此处输入图像描述

更新 - 答案

我得到了我的答案。这是相同的变化。

换列是这样的，

<td class="click" id="clickTest2">
<script>
$("#clickTest2").click({param1: "content2", param2: "One more text area Hurrey!!!"}, cool_function);
</script>
<div>
    <img id='' src="file://c://gray.jpg"/>
</div>
<div id='content2' title='Ketan B' style="display:none;">
    <div><textarea>One more text area Hurrey!!!</textarea></div>
</div>

脚本更改是这样的，

function cool_function(event){
$('#'+event.data.param1).dialog({
    model : true,
    buttons: {
        "Save": function() {
            alert('Content Will be Saved');
            $(this).dialog('close');
        },
        "Cancel":  function() {
            $(this).dialog('close');
        }
    }
});
}
4

1 回答 1

1

好的，所以我已经浏览了您提供的整个代码，它太复杂了......太多的递归调用。所以我让代码变得简单了一点，而不是递归地调用模式（这实际上导致content从对话框中取消绑定），我隔离了这样的东西：

HTML：

<div id="users-contain" class="ui-widget">
      <h1>Existing Users:</h1>
      <table id="users" class="ui-widget ui-widget-content">
        <thead>
          <tr class="ui-widget-header ">
            <th>Name</th>
            <th>Email</th>
            <th>Password</th>
            <th>Comment</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John Doe</td>
            <td>john.doe@example.com</td>
            <td>johndoe1</td>
            <td class="click" id="clickTest1">
              <div>
                <img id='' src="http://www.eventbelladesigns.com/sitebuildercontent/sitebuilderpictures/gray.jpg"/>
              </div>
              <div id='content1' title='John Doe' style="display:none;">
                <div><textarea>Hello this is Text Area</textarea></div>
              </div>
            </td>
          </tr>
          <tr>
            <td>Ketan B</td>
            <td>ketan.b@example.com</td>
            <td>ket1</td>
            <td class="click" id="clickTest2">
              <div>
                <img id='' src="http://www.eventbelladesigns.com/sitebuildercontent/sitebuilderpictures/gray.jpg"/>
              </div>
              <div id='content2' title='Ketan B' style="display:none;">
                <div><textarea>One more text area Hurrey!!!</textarea></div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

JS：

$("#clickTest1").on('click', callModal1);
$("#clickTest2").on('click', callModal2);

function callModal1(){
  $(function() {
    $( "#content1" ).dialog(({
      buttons: [
        {
          text: "Cancel",
          click: function() {
            $( this ).dialog( "close" );
          }
        }
      ]
    }));
  });
}

function callModal2(){
  $(function() {
    $( "#content2" ).dialog(({
      buttons: [
        {
          text: "Cancel",
          click: function() {
            $( this ).dialog( "close" );
          }
        }
      ]
    }));
  });
}

在这里，一旦调用发生，模态/对话框将打开，但是一旦您通过单击关闭图标或取消按钮关闭对话框，内容将不会被卸载，并且在随后的单击过程中仍会出现对话框。

我已经为您分箱了，您可以在以下位置查看有效的解决方案：http: //jsbin.com/oxucak/1/edit。并记住run with js。

于 2013-08-16T21:16:22.660 回答