ruby on rails - why is display:block css only staying open momentarily -

i have rails app profile pages allow users post different types of information themselves.

on left side of page, there is, example, link says "add job," when clicked displays form (originally hidden through css display:none;) lets user add details job they've had. link in 'span2' column in html below. if user has entered details of job in database, information appear in middle 'span6' column , then, if user wants add details of job had, job form open in 'span3' column on right. however, if there no jobs in db, job form appear in middle because there's no content pushing right.

the site uses backbone change css display: none display: block, this.

 "click .addjob": "showjobform"    showjobform: function(){        $('.jobform').css('display', 'block');     }, 

problem: when click on link 'add job,' form flashing on page , disappearing.

there 3 factors affect behavior:

1. the form more stay open if there entry in database (i.e. middle column containing something)

2. the form more stay open if there no '#' @ end of url, gets placed there (this backbone thing) when click 'add job.' example, if click add job, form might open , stay open, if don't refresh url (to clear away #) next time want add job. included code in backbone code (which doesn't use router) try rid of # it's not working

        if (window.history && window.history.pushstate) {         backbone.history.start({pushstate: true});     } 

3. this rails 4 app. built same app in rails 3 and, despite presence of above 2 factors, never had issue in rails 3 app. there has been changes javascript in rails 4.

question: can explain why display:block might not working me did earlier (in rails 3 app), or tell me how debug this.

the markup

<div class="row employment">     <div class="span2">       <h5>employment</h5>    <a href="#" class="addjob">add</a>     </div>     <div class="span6">        <table class="table table-striped">                     <thead>                     <tr>                         <!-- <th> category</th> -->                   <!--     <th>practice areas</th> -->                       <th>company</th>                <th>title</th>                 <th>start</th>                  <th>end date</th>                  <th>current position</th>                      </tr>                   </thead>  <tbody>     <tr>       <td>esso </td>        <td>gas pumper </td>         <td>1966 </td>          <td>1968 </td>            <td>true </td>       <td></td>        <td><a class="editarea 2" href="/lawyer_profiles/22?job_id=2">edit</a></td>       <td><a data-confirm="are sure?" data-method="delete" href="/employments/2" rel="nofollow">destroy</a></td>     </tr>     </tbody>     </table>     </div>     <div class="span3">   <div class="jobform">  <form accept-charset="utf-8" action="/employments" class="simple_form form-inline" id="new_employment" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="faigo6e1//1ikifvbfghfd7lksbg+zdufjurk05xs7m="></div>   <div class="control-group string optional employment_employer"><label class="string optional control-label" for="employment_employer">company</label><div class="controls"><input class="string optional company" id="employment_employer" name="employment[employer]" type="text"></div></div>    <div class="control-group string optional employment_jobtitle"><label class="string optional control-label" for="employment_jobtitle">job title</label><div class="controls"><input class="string optional job-title" id="employment_jobtitle" name="employment[jobtitle]" type="text"></div></div> <div class="control-group select optional employment_startwhen"><label class="select optional control-label" for="employment_startwhen">startwhen</label><div class="controls"><select class="select optional" id="employment_startwhen" name="employment[startwhen]"><option value=""></option> .. <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option></select></div></div>                              <!--  order: [:month, :year] %> -->   <div class="control-group select optional employment_endwhen"><label class="select optional control-label" for="employment_endwhen">endwhen</label><div class="controls"><select class="select optional" id="employment_endwhen" name="employment[endwhen]"><option value=""></option> ... <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option></select></div></div>   <div class="control-group boolean optional employment_currentposition"><label class="boolean optional control-label" for="employment_currentposition">current position?</label><div class="controls"><input name="employment[currentposition]" type="hidden" value="0"><label class="checkbox"><input class="boolean optional currentposition" id="employment_currentposition" name="employment[currentposition]" type="checkbox" value="1"></label></div></div>    <input class="btn" input_html="{:class=&gt;&quot;special&quot;}" name="commit" type="submit" value="create employment">    <a class="btn btn-inverse" href="/lawyer_profiles/22">hide form</a>  <!-- <a href="#" class="hideawardform">hide</a> --> </form> </div>       </div>  </div> 

try replace "display: block"
on

showjobform: function(){        $('.jobform').show();     },