Content with queryui checkbox button grows when is

Question

I have the next code to replace content using Backbone.js

jsfiddle

I don't know why the checkbox button grows when the content is replaced. Simply, I use the next code to checkbox

 $('.checkWeek').button(); 

Answer 1

I'm guessing that $('.checkWeek').button() only needs to be called once per .checkweek element, or maybe just once in total.

If so then possible workarounds would be :

1. to execute $('.checkWeek').button() conditionally (though I'm not sure what the test might be).
2. to make the $('.checkWeek') selector more selective, ie select only the freshly added element.
3. if a destroy option exists, to call $('.checkWeek').button('destroy').button() (or similar - you will have to search through the plugin's API documentation).

Without a more complete understanding of the app (and the plugins), I can't tell which of these possibilities is most appropriate.

Answer 2

I think the reason is because you keep calling the $('.checkWeek').button(); on every click so JQuery does something funny and adds a span within a span which causes the size to grow.

A simple fix is to not call the $('.checkWeek').button(); if the button already exists (or shown)

// if button already exists then dont add it again.
if(!$('label[for=checkWeekM]').hasClass('ui-button'))
      $('.checkWeek').button();

Look here: http://jsfiddle.net/Thxtr/3/

Answer 3

At the moment code stores the templates in div tags - every time you call button the template is modified. You can avoid that by using a script tag with type text/template so that it won't be executed as Javascript.

Rigth now:

<div data-template-name="central-home">
    <div data-template-name="">
        <input type="checkbox" class="checkWeek" id="checkWeekM" />
        <label for="checkWeekM">L</label>
    </div>
</div>

Change to:

<script data-template-name="central-home">  
    <div data-template-name="">
         <input type="checkbox" class="checkWeek" id="checkWeekM" /><label for="checkWeekM">L</label>
    </div>      
</script>

With the Javascript unchanged the template will not be found. So you also have to update this line:

 content.view = ...$.trim($("[data-template-name='"+ template_name +"'] div").html()...

With the requirement for the template to be inside a div removed:

content.view = ...$.trim($("[data-template-name='"+ template_name +"']").html() ...

Working fiddle