{"id":6935,"date":"2014-05-11T17:47:40","date_gmt":"2014-05-11T17:47:40","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/05\/11\/how-to-bind-mouseover-click-events-on-element-inside-jsrender-template-collection-of-common-programming-errors\/"},"modified":"2014-05-11T17:47:40","modified_gmt":"2014-05-11T17:47:40","slug":"how-to-bind-mouseover-click-events-on-element-inside-jsrender-template-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/05\/11\/how-to-bind-mouseover-click-events-on-element-inside-jsrender-template-collection-of-common-programming-errors\/","title":{"rendered":"how to bind mouseover, click events on element inside jsrender template-Collection of common programming errors"},"content":{"rendered":"<p><code>{{:#data}}<\/code> renders #data as a string, so <strong>that approach won&#8217;t work unless #data stringifies and parses neatly<\/strong>. Objects won&#8217;t stringify or parse neatly without manual JSON usage. In fact, I suspect only numbers, booleans, <code>undefined<\/code>, and <code>null<\/code> will stringify and parse correctly. That approach <strong>also<\/strong> won&#8217;t work <strong>if the function is not global<\/strong>. Being forced to define the callback function globally any time you want to do this strikes me as a severe problem. So I can&#8217;t recommend using in-tag event-handlers, especially when you already have JavaScript running.<\/p>\n<p><strong>Instead<\/strong>, after you insert your rendered content into the DOM, you can bind the event there. Here&#8217;s a rough sketch.<\/p>\n<p>Add a class or some other selector-fodder to your<\/p>\n<li>.\n<li class=\"onMouseEnter\" id=\"liv_{{:nid}}\"><\/li>\n<pre>\n<\/pre>\n<p><code>Put each of your #data values into an object using an equivalent of <code>liv_{{:nid}}<\/code> as the key.<\/code><\/p>\n<pre><code>var dataMap = {};\n$.each(yourDataValues, function (i, value) {\n    dataMap['liv_' + value.nid] = value;\n});\n<\/code><\/pre>\n<p>Lastly, bind a live event to the container into which you pushed your rendered template.<\/p>\n<pre><code>$(containerOfRenderedTemplate).on('mouseenter', '.onMouseEnter', function () {\n    var id = $(this).attr('id');\n    var data = dataMap[id];\n    desiredCallbackFunctionWhichConsumesData(data);\n});\n<\/code><\/pre>\n<p><code>dataMap<\/code> and the event-binding call should be within the same scope.<\/p>\n<p><strong>Note:<\/strong> If this rendering can happen more than once, and you need to replace the rendered content with all-new rendered content, you should unbind the old event before binding the new one.<\/p>\n<pre><code>$(containerOfRenderedTemplate).off('mouseenter', '.onMouseEnter');\n<\/code><\/pre>\n<\/li>\n","protected":false},"excerpt":{"rendered":"<p>{{:#data}} renders #data as a string, so that approach won&#8217;t work unless #data stringifies and parses neatly. Objects won&#8217;t stringify or parse neatly without manual JSON usage. In fact, I suspect only numbers, booleans, undefined, and null will stringify and parse correctly. That approach also won&#8217;t work if the function is not global. Being forced [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6935","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6935","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=6935"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6935\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=6935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=6935"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=6935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}