嘗試動態創建模式並執行自定義腳本失敗

Question

首先，當我將我的數據和代碼追加到包裝中時，它不顯示非常奇怪的代碼。當我快速觀看與視覺工作室。然後最終它不會顯示模態。

代碼：

var wrapper = $("<div>"); 
var data = $("<select>"); 
data.append('<option value = "17">Asset Name Read Only</option>').append('<option value = "18">Asset Type</option>').append('<option value = "19">Asset Code Read Only</option>').append('<option value = "20">Asset Parent</option>').append('<option value = "21">Asset Parent All</option>').append('<option value = "22">Asset Name Editable</option>').append('<option value = "23">Asset Code Editable</option>') 
var code = $("<script>").attr("type", "text/javascript").html('$(".modal select option").click(function(){$(SELECTED_ELEMENT).attr("elType", $(this).val());});'); 
wrapper.append(data).append(code); 
parent.showOverlay(); 
parent.showModal(wrapper); 

上面的語句「parent.showModal（包裝）」如下：

function showModal(data){ 
    $("<div class = 'modal'>").css({ 
     top: $(window).height()/2 - $("div.modal").height()/2, 
     left: $(window).width()/2 - $("div.modal").width()/2 
    }).append(data).fadeIn(); 
} 

我不是很確定什麼是在感覺事情，無論是模態顯示爲什麼javascript被添加到包裝div。我究竟做錯了什麼？

Answer 1

沒有需要顯示它的appendTo（「body」）。

至於劇本，不發送腳本的功能，但只是因爲它的工作原理HTML，那麼行之後是這樣：

parent.showModal（包裝）; （「option」）。click（function（）{ //在此處插入代碼 }）;

Answer 2

你應該讓使用插件，下面是簡單的代碼

(function($){ 
    $.fn.modal = function(){ 
     //append div to body 
    $("<div />").appendTo('body').attr("id","modal").css({width: 200, height:120, background-color:'red', position:'absolute', display:'none'}); 
    win_width = $(window).width(); //get the width of window 
    win_height = $(window).height(); 
    mod_width = $('#modal').width(); 
    mod_height = $('#modal').height(); 
    //calculate values to center the modal 
    m_top = (win_height/2) - (mod_height/2); 
    m_left = (win_width/2) - (mod_width/2); 
    //center modal 
    $("#modal").css({top: m_top, left: m_left}); 
    $("#modal").fadeIn(); 
    } 
})(jQuery); 

請確保調用它。

<button id = 'button'>CLick me</button> // html button 
$('#button').modal(); // call plugin in js