0

我正在创建一个页面，我想在其中动态创建链接。所以我有一个按钮（它调用函数 fnLink()，它动态创建 popup-div）点击它会显示一个 popup-div，询问要创建的链接的名称。Popup-div 有保存和取消按钮。单击保存按钮时，我需要将该输入文本转换为链接并提供一些文本区域以向链接添加一些描述，然后弹出窗口被删除/隐藏。popup-div 正在创建，但是在单击保存时它没有创建链接或文本区域，也没有在单击取消时被删除。谁能告诉我为什么这不起作用并帮助我解决问题？如果创建一个链接，我只是显示和隐藏弹出窗口，则代码工作正常，但是对于创建多个链接，我正在动态创建和删除不起作用的弹出窗口！

      $('#link_save_btn').click(function(){
fnLinkSave(); 
    });

    function fnLink($this){
           var $div = $(document.createElement('div')).attr("id", 'save_link');
         $div.html('  <input type="text" id="link_header" style="position: 
                absolute; height: 21px;width: 185px;"/>  
                <img id="popup" src="popup.png" style ="position: absolute;"/>   
                <img id="save" src="save.jpg" style="position: absolute;" /> 
                <img id="cancel" src="cancel.jpg" style ="position: absolute;" />');
           $div.appendTo("#page");
           $("#page").trigger('create');        
          }

        function fnLinkSave(){
    // $('#save_link').hide();
    $div.remove(); 
     var l = $('#link_header').val();
     $('<a/>', {href:'#', text: l}).appendTo('#page');  
     var newTextAreaDiv = $(document.createElement('div')).attr("id", 'TextAreaDiv' +
              numTextAreaCounter);
     newTextAreaDiv.html('<textarea rows="1" style=" max-height:100%; max-width: 
        100%; ' + ' id = "textbox' + numTextAreaCounter + ' " autofocus></textarea>');
     newTextAreaDiv.className='notes_textarea';
     newTextAreaDiv.appendTo("#page");
     $("#page").trigger('create');
   }
4

2 回答 2

1

如果单击保存按钮，您将删除 $div。那它应该如何运作？

$div.remove();

另外，$div 是另一个函数的局部变量，使其全局可用。

var $div;

在你的功能中，不要写var $div =，而只是简单地$div =

于 2013-06-13T07:43:51.573 回答
1

我只会创建一个默认的弹出容器，您可以更改其中的内容。因此，您可以将弹出窗口存储在此 div 中。这很容易只使用 .hide() 和 .show()。

例如：

function popup(content){
  if ($("#popup").length > 0){ // check if popup div exists
    $("#popup").html(content); // add content to popup div
    $("#popup").show(); // show div, since it exists so its hidden
  }else{
    $("body").append("<div id='popup'>"+content+"</div>"); // if popup not exists make popup
  }
  $("#popup .close").click(function() {$("#popup").hide();});
}

现在调用：

popup("An inputfield: <input type='text' name='inputfield' /><div class='close'>close this div</div>");

我不喜欢从我的文档中删除我以后可能需要的元素，如果你不关心你可以只是 .remove(); 有问题的对象。

$("#popup .close").click(function() {$("#popup").remove();});

让它有点动态，支持多个弹出窗口

$(".popup .close").click(function() {$(this).parent(".popup").remove();});
于 2013-06-13T08:16:01.317 回答