多行JQuery對話框問題

我在使用JQuery時遇到了嚴重問題。多行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>[email protected]</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>[email protected]</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'); 
     } 
    } 
}); 
}

來源

2013-08-16 Ketan

爲什麼你需要的內容？您是否有目的需要它在以後被綁定到相同的點擊事件？ –

沒關係，現在我明白了，第一次點擊後，你沒有得到後續點擊彈出窗口.. –

好了，我已經通過您已提供整個代碼消失了，這太複雜了..太多的遞歸調用。所以我做的代碼變得簡單，而不是遞歸調用模式（這實際上導致聯合國從對話框中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>[email protected]</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>[email protected]</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-16 21:16:22

好友，謝謝...其實我需要這個動態的東西（因爲我的行數可能很）。這就是爲什麼我試圖構建這個例子，使得單個函數被調用來打開該特定行的對話框和輸入元素將被打開和填充。我從你的簡化工作版本中得到了我的答案。再次感謝您的幫助.. – Ketan

問題是多次使用相同ID的原因。我認爲是這樣的。 – Ketan

@Ketan：很高興能幫到一些。很高興你找到了解決方案。 –

多行JQuery對話框問題

回答

相關問題