onclick генерирует неверную функцию

Question

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

var show = function() {
   console.log("hello");
};

$(container).append(
   "<div class='info' onclick=" + show + ">Show</div>"
);

Однако сгенерированный html выглядит так

<div class="info" onclick="function()" {="" console.log("hello");="" }="">
     Show
</div>

Любая идея, как я могу это исправить, чтобы при нажатии на div моя функция вызывается?

Answer 1

Вы можете просто сделать это, просто заставить функцию показывать и вызывать ее по клику. Это будет работать

<script>
   function show() {
      console.log("hello");
   }

   $(container).append(
      '<div class="info" onclick="show()">Show</div>'
   );
</script>

Answer 2

Это своего рода необычный подход к тому, что вы пытаетесь сделать. Я думаю, что было бы более идиоматически c в jQuery либо

a) сначала определить элемент с помощью обработчика событий, а затем добавить его,

$("<div>Show</div>", {
  "class": "info",
  on: {
    click: function(e) {
     console.log("Hello");
    }
  }
}).appendTo($(container));

или

b) добавьте новый элемент, а затем добавьте к нему обработчик событий после добавления.

$(container).append("<div class='info'>Show</div>");
$(container).children('.info').last().on('click', function(e) { console.log("Hello"); });

Между этими двумя я бы рекомендовал первый в этом случае.

Answer 3

попробуйте использовать:

var show = function() {
    console.log("hello");
};

$(container).append("<div class='info' onclick="+'show()'+">Show</div>");

Это будет работать. Причина, по которой ваш код

var show = function() {
    console.log("hello");
};

$(container).append("<div class='info' onclick=" + show + ">Show</div>");

не работал должным образом, поскольку show является объектом типа функции, поэтому, когда используется имя функции без (), переменная заменяется на код, который она состоит , Надеюсь, это поможет.

Answer 4

Переменная show представляет собой function, тогда как вы можете связать ее с string?

Код должен быть таким,

$(container).append("<div class='info' onClick='show()'>Show</div>");