JQuery append не работает с динамическим контентом?

HI Я делаю веб-приложение и имею кнопки, которые устанавливают переменную. Я хочу, чтобы переменная была добавлена в div или элемент, который я создаю, используя разделение строк. Я попытался, но с успехом я попытался изменить div с «P» на D, но он не работает. Я также попробовал двойной щелчок, чтобы не мешать одному клику.JQuery append не работает с динамическим контентом?

У меня кончились идеи. Я первоначально имел это добавление в карете, но я не хочу, чтобы люди запускали код внутри моего текстового поля.

Вот 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 Согласитесь с Рори, просьба представить упрощенное и сукцинированное представление вашей проблемы. –

Также 'input [id =" freeSchoolMeals "]' может быть записано как 'input # freeSchoolMeals' или' # freeSchoolMeals' –

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

будет только добавить обработчик к p aragraphs, которые существуют на данный момент вы прикрепляя обработчики. Так как вы добавили больше p aragraphs позже, если вы не хотите динамически присоединять обработчики событий при создании новых элементов, вам необходимо делегировать обработку события на какой-либо другой элемент, который существует, когда вы присоединяете обработчики, такие как document. $().on может выполнять делегирование:

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

Если вы используете старую версию JQuery, используйте 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 элемент, когда эта линия выполнена. Поэтому все созданные p элементы из вашей функции spitline не будут привязаны ни к одному событию. Вам необходимо связать событие 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 не работает с динамическим контентом?

ответ

Смежные вопросы