#jquery #jquery-selectors #javascript
#jquery #jquery-селекторы #javascript
Вопрос:
У меня проблема с этой функцией:
$("#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 с проектом:
Комментарии:
1. Вы пытаетесь сделать что-то подобное? jsfiddle.net/MTsk3/3
Ответ №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
});
Все работает!
Комментарии:
1. Просто не забудьте добавить div: <div class=’editable’> По какой-то причине этот div нельзя раскрасить</div> Я вижу, что события сейчас не выпадают. Я внес исправления, и это отлично работает!