Jquery append不会与动态内容一起工作？

您好我正在制作一个Web应用程序，并有按钮来设置一个变量。我希望将变量添加到使用行分割创建的div或元素中。我已经尝试过，但现在成功了，我尝试将div从'P'改为D，但它不起作用。我也尝试了双击，以免干扰单击。Jquery append不会与动态内容一起工作？

我已经用完了想法。我原本在插入符号处添加了这个符号，但我不希望人们在我的textarea中运行代码。

这里是jsfiddle

$(document).ready(function() { 

    var toAdd = "</br>" 
    $('input[id="freeSchoolMeals"]').click(function() { 
     toAdd = '<div id="fsm">FSM</div>'; 
     alert(toAdd); 
     return false; 
    }); 
    $('input[id="englishAdditional"]').click(function() { 
     toAdd = '<div id="eal">EAL</div>'; 
     alert(toAdd); 
     return false; 
    }); 
    $('input[id="giftedTalented"]').click(function() { 
     toAdd = '<div id="gt">G&T</div>'; 
     alert(toAdd); 
     return false; 
    }); 
    $('input[id="schoolAction"]').click(function() { 
     toAdd = '<div id="sca">ScA</div>'; 
     alert(toAdd); 
     return false; 
    }); 
    $('input[id="schoolActionPlus"]').click(function() { 
     toAdd = '<div id="sap">SAP</div>'; 
     alert(toAdd); 
     return false; 
    }); 
    $('input[id="statement"]').click(function() { 
     toAdd = '<div id="stm">STM</div>'; 
     alert(toAdd); 
     return false; 
    }); 
    $('input[id="speechLang"]').click(function() { 
     toAdd = '<div id="slcn">SLCN</div>'; 
     alert(toAdd); 
     return false; 
    }); 
    $('input[id="specificLearn"]').click(function() { 
     toAdd = '<div id="spl">SpLD</div>'; 
     alert(toAdd); 
     return false; 
    }); 
    $('input[id="mildLearn"]').click(function() { 
     toAdd = '<div id="mld">MLD</div>'; 
     alert(toAdd); 
     return false; 
    }); 
    $('input[id="behaviour"]').click(function() { 
     toAdd = '<div id="besd">BESD</div>'; 
     alert(toAdd); 
     return false; 
    }); 
    $('input[id="autisticSpectrum"]').click(function() { 
     toAdd = '<div id="asd">ASD</div>'; 
     alert(toAdd); 
     return false; 
    }); 


    $("p").dblclick(function() { 
     var newContent = toAdd; 
     $(this).append(newContent); 
    }); 

    $("textarea").keyup(splitLine); 

    function splitLine() { 
     //$("#opt").empty(); 
     var lines = $("textarea").val().split(/\n/g); 
     for (var i = 0; i < lines.length; i++) { 
      var ele; 
      if ($("p:eq(" + i + ")").get(0)) { 
       ele = $("p:eq(" + i + ")"); 
       ele.html(lines[i]); 
      } else { 
       ele = $("<p>"); 
       ele.html(lines[i]); 
       $("#opt").append($(ele).draggable()); 
      } 
     } 
    } 
    $("#toggleButton").toggle(function() { 
     $('#comments').animate({ 
      height: 650 
     }, 200); 
    }, function() { 
     $('#comments').animate({ 
      height: 22 
     }, 200); 
    }); 

    $(document).keyup(function (e) { 
     if (e.keyCode == 13) { // enter 
      Search(); 
      return false; //you can also say e.preventDefault(); 
     } 
    }); 
});

来源

2013-01-18 Ferg

对于这个问题并没有什么帮助，但是你真的需要干这个代码。 –

@Ferg与Rory同意，请提供您的问题的简单和简单的表示形式。 –

另外'input [id =“freeSchoolMeals”]'可以写成'input＃freeSchoolMeals'或'＃freeSchoolMeals' –

$("p").dblclick(function(){

只会处理程序追加到存在于您要连接的处理程序的那一刻p aragraphs。由于以后要添加更多p aragraph，除非要在创建新元素时动态附加事件处理程序，否则需要将事件处理委托给某个其他元素，即附加处理程序时存在的元素，例如document。 $().on可以进行委托：如果您使用的是旧版本的jQuery

$(document).on("dblclick", "p", function(){

，使用delegate代替：

$(document).delegate("p", "dblclick", function(){

（你不需要改变任何东西比这个单行）

来源

2013-01-18 14:41:26

你天才！那工作。所以document.on基本上就像是为dbl单击准备好的另一个文档？ – Ferg

@Ferg'on'与任何委托元素，任何目标选择器和任何事件一起工作。 $（“＃delegate”）。on（“event”，“.target”，handler）'。只是“文档”始终是一个可行的代表（它是所有元素的始祖，它始终存在）。 –

的结合执行该线路时$("p").dblclick()只是结合所有现有p元件。因此，spitline函数中所有新创建的p元素都不会绑定任何事件。当您创建它时，您需要绑定dblclick事件每个p元素。

你可以修改代码如下：

function pDblclick() 
{ 
    var newContent = toAdd; 
    $(this).append(newContent); 
} 

/* remove the old binding to all p element $('p').dblclik(...) */ 


/* This function is modified */ 
function splitLine() { 
    //$("#opt").empty(); 
    var lines = $("textarea").val().split(/\n/g); 
    for (var i = 0; i < lines.length; i++) { 
     var ele; 
     if ($("p:eq(" + i + ")").get(0)) { 
      ele = $("p:eq(" + i + ")"); 
      ele.html(lines[i]); 
     } else { 
      ele = $("<p>"); 
      ele.html(lines[i]); 
      ele.dblclick(pDblclick); // binding the event to the created p 
      $("#opt").append($(ele).draggable()); 
     } 
    } 
}

来源

2013-01-18 14:40:15

Jquery append不会与动态内容一起工作？

回答

相关问题