jQuery-appended HTML elements do not pick up CSS styles with crate & clj-js

Question

Run into a rather interesting problem.

An element generated as html and inserted into the page via jquery does not pick up the assigned styles.

The style is in the HTML, but the browser (Chrome, Firefox) does not render it at all.

The generated html can be saved via the browser, and the HTML file when opened DOES have the style applied.

The same code generated via javascript directly (bypassing crate) or by using an explicit html string from within clojurescript also has the correct style.

It appears to be an issue with crate-generated elements only.

eg:

(-> (jquery "body")         
  (.append (crate/html [:h1{:class "red"} "Test inside a jquery"]) ))))

Where the red class simply defines:

.red {
color:red;
}

I have tried several variations of crate here including defpartial, defhtml with the same results. Same results using jayq or non-wrapped jquery. Similarly, using different jquery methods (inner, append, html, etc).

Am I missing something very obvious?

Answer 1

Turns out that the underlying problem was that I had a function in my app called "get"

(defn get [])

Which may have been conflicting with clojure.core/get.

Removing or renaming this function resolves the issue and CSS is applied correctly. Very strange.

Answer 2

Can you try:

(-> (jquery "body")         
  (.append (crate/html [:h1.red "Test inside a jquery"]) ))))

Answer 3

Since your function call is just for the side-effects, you should ensure that lazy evaluation isn't the issue:

(doto (jquery "body")
  (.append (crate/html [:h1{:class "red"} "Test inside a jquery"])))