Что означает этот нетрадиционный код CSS?
Вот почему динамически созданные элементы не реагируют на клики & nbsp;:
var body = $("body");
var btns = $("button");
var btnB = $("<button>B</button>");
// `<button>B</button>` is not yet in the document.
// Thus, `$("button")` gives `[<button>A</button>]`.
// Only `<button>A</button>` gets a click listener.
btns.on("click", function () {
console.log(this);
});
// Too late for `<button>B</button>`...
body.append(btnB);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>В качестве обходного пути вы должны прослушивать все клики и проверять исходный элемент & nbsp;:
var body = $("body");
var btnB = $("<button>B</button>");
var btnC = $("<button>C</button>");
// Listen to all clicks and
// check if the source element
// is a `<button></button>`.
body.on("click", function (ev) {
if ($(ev.target).is("button")) {
console.log(ev.target);
}
});
// Now you can add any number
// of `<button></button>`.
body.append(btnB);
body.append(btnC);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>Это называется «Event Delegation». Хорошие новости, это встроенная функция в jQuery: -)
var i = 11;
var body = $("body");
body.on("click", "button", function () {
var letter = (i++).toString(36).toUpperCase();
body.append($("<button>" + letter + "</button>"));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>A</button>2 ответа
Из того, что я могу почерпнуть из того, что я нашел в Интернете, в большинстве случаев удается избежать какого-то странного соглашения об именах, которое из того, что я прочитал, вероятно, не очень хорошая идея для начала.
.\31\/2, .\32\/4, .\36\/12 { /* this */
.1/2, .2/4, .6/12 { /* translates to this */
width: 50%;
}
.\31\/3, .\34\/12 { /* this */
.1/3, .4/12 { /* translates to this */
width: 33.33333%;
}
Я не знаю, видели ли вы эту статью, но принятый ответ разбивает ее довольно хорошо. после \3 похоже на начало. тогда \/ избегает слэша.
CSS-идентификаторы, такие как классы и идентификаторы, не могут начинаться с цифры (0 - 9).
Из спецификации:
В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [az, AZ, 0-9] и символы ISO 10646 U + 0080 и выше, плюс дефис (-) и подчеркивание (_); они не могут начинаться с цифры , двух дефисов или дефиса, за которыми следует цифра.
Однако в том же разделе также говорится следующее:
Экранирование обратной косой черты всегда считается частью идентификатора или строки.
Это означает, что, хотя вы не можете начать идентификатор с цифры, вы можете использовать escape-код обратной косой черты (
\foo), который преобразуется в цифру. Обратите внимание, что это правило применяется в CSS, но не в HTML, где почти любая комбинация символов является приемлемым значением .Так вот что вы видите в своем коде. Числовые значения класса HTML, которые должны быть экранированы для работы в CSS. Вот несколько примеров:
\31- это кодовая точка Unicode для цифры один.\32- это кодовая точка Unicode для цифры два.\33- это кодовая точка Unicode для цифры три.Другая цель экранирования обратной косой черты в CSS - отменить значение специальных символов.
Косая черта (
/) имеет особое значение в CSS . Поэтому его следует избегать для правильного использования.Итак, давайте теперь расшифруем имена классов в вашем коде:
.\31\/2, .\32\/4, .\36\/12 { width: 50%; }Первый выход (
\31) - это Unicode для «1».Второй побег (
\/2) отменяет особое значение косой черты.Итак, HTML выглядит так:
class = "1/2" class = "2/4" class = "6/12"Вот еще несколько из вашего списка:
.\31\/3, .\34\/12 { width: 33.33333%; } /* HTML class values = 1/3, 4/12 */ .\32\/3, .\38\/12 { width: 66.66667%; } /* HTML class values = 2/3, 8/12 */ .\31\/12 { width: 8.33333%; } /* HTML class value = 1/12 */ .\35\/12 { width: 41.66667%; } /* HTML class value = 5/12 */ .\31\30\/12 { width: 83.33333%; } /* HTML class value = 10/12 */ .\31\31\/12 { width: 91.66667%; } /* HTML class value = 11/12 */