Блог

У меня проблема с этой функцией:

 $("#contentdiv").click(function() {
    $(this).append("<div class='editable'>For some reason this div cannot be colored</div>");
})

var $currentInput = null;
$("#background_color_button").live("click", function() {
    $currentInput = null;
    if ($currentInput == null) {
        $currentInput = $(this).prev();
        $("label").html($currentInput.attr("id"));
    }
});
var editid;
$("div.editable").click(function(e) {
    e.stopPropagation();
    if ($currentInput == null)
        return;      
    var css = GetCssProperties();    
    $(this).css(css);
    $("label").html("");
});

function GetCssProperties() {
    if ($currentInput == null) return null;

    var value = $currentInput.val();
    if ($currentInput.attr("id") == "background-color") {
        return {
        "background-color": value
        }
    }
}
  

Это позволяет изменять цвет фона div с помощью класса «Редактируемый»

Сначала вы нажимаете на div с идентификатором «#background_color_button», и он извлекает значение введенного текста над ним, а затем вы нажимаете на div (с class=»редактируемый»), к которому вы хотите применить стиль.

Моя проблема здесь:

 $("#contentdiv").click(function() {
    $(this).append("<div class='editable'>For some reason this div cannot be colored</div>");
})
  

Эта функция создает div с class=»editable» внутри div с ID =»contentdiv».

Однако, хотя он имеет class =»редактируемый», нажатие на div с ID =»background_color_button», а затем на динамически созданный div не приведет к изменению стиля, как у divs, которые динамически НЕ загружаются с помощью jQuery.

Я знаю, что вы можете использовать:

 .delegate('.editable', 'click', function() {
    $(this).css("background-color","red");
});
  

или

 $(".editable").live("click", function() {
    $(this).css("background-color","red");
});
  

Для достижения этого, но когда я пытаюсь поместить строку:

 .delegate('.editable', 'click', function() {
  

или

 $(".editable").live("click", function() {
  

Вместо:

 $("div.editable").click(function(e) {
  

Функция больше не работает.

Заранее большое вам спасибо,

Тейлор

Вот документ JSfiddle с проектом:

http://jsfiddle.net/TSM_mac/gJLSd/1/

Это потому, что вы добавляете внутри div #contentdiv и события не выводятся потоком.

Итак, если вы измените html с этого:

 <div id="contentdiv">Click here to make a div</div>  

к этому:

 <div id="contentdiv"><span id='clicker'>Click here to make a div</span></div>  

а затем js из:

 $("#contentdiv").click(function() {
    $(this).append("<div class='editable'>For some reason this div cannot be colored</div>");
}) 

...
...

$("div.editable").click(function(e) {
     //blah blah blah
});
  

к этому:

 $("#clicker").click(function() {
    $(this).parent().append("<div class='editable'>For some reason this div cannot be colored</div>");
})

...
...

$("div.editable").live("click",function(e) {
     //blah blah blah
});  

Все работает!