个人中心
gpt4 book ai didi

java - 多行 JQuery 对话框问题

转载 作者：行者123 更新时间：2023-12-01 14:14:01 27 4
gpt4 key购买 nike

我在使用 JQuery 时遇到了严重问题。

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

下面是我的代码。

<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 代码，包括 content id 代码。

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

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

对话框1

enter image description here

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

enter image description here

更新 - 答案

我得到了答案。以下是相同的更改。

列的变化是这样的，

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

最佳答案

好的，我已经浏览了您提供的整个代码，它太复杂了..太多的递归调用。因此，我使代码变得简单一些，而不是递归地调用模式(这实际上导致对话框中的 content 解除绑定(bind))，我将这样的内容分开:

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 。并记住使用js运行。

关于java - 多行 JQuery 对话框问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18280898/

27 4 0
文章推荐： java - OpenGL - OpenGL 2.1 中实现的最先进的渲染方法是什么？
文章推荐： java - 如何将现有代码分配给java类中的新按钮？
文章推荐： java - 将 Spring Boot 服务注入(inject)非托管类
文章推荐： 带有静态内部类的 Java 新关键字
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com