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>

今の問題は、ページを初めて読み込むときにコードでアラートを確認することです。contentalert は、 id コードを含む div コード全体を提供します。

ダイアログバーに表示されたら、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 に答える