Question

我有一个带有个人资料页面的Rails应用程序，允许用户发布关于他们自己的不同类型的信息。

在页面的左侧，有一个链接显示“添加作业”，单击该链接时会显示一个表单（最初通过css display:none;隐藏），该表单允许用户添加有关的详细信息他们有过的工作。此链接位于以下html的“span2”列中。如果用户已经在数据库中输入了作业的详细信息，那么该信息将显示在中间的“span6”列中，然后，如果用户想要添加他所拥有的另一个作业的详细信息，则该作业表单将在'右侧的span3'列。但是，如果数据库中没有作业，则作业表单将显示在中间，因为没有内容将其推向右侧。

该网站使用Backbone将css从display: none更改为display: block，就像这样。

 "click .addjob": "showJobForm"

  showJobForm: function(){
       $('.jobform').css('display', 'block');
    },

问题：当我点击“添加作业”链接时，表单在页面上闪烁然后消失。

有三个因素会影响此行为：

如果已经存在，表单更有可能保持打开状态在数据库中输入（即中间列包含东西）
如果没有“＃”，表单更有可能保持打开状态网址的末尾，放在那里（这是一个Backbone的东西）当我点击“添加工作”时。例如，如果我单击添加作业，表格可能会打开并保持打开，但如果我不刷新 url（清除＃）下次我想添加一份工作。一世在我的Backbone代码中包含此代码（不使用路由器）试图摆脱＃但它不起作用
```
     if (window.history && window.history.pushState) {
        Backbone.history.start({pushState: true});
    }
```
这是一款Rails 4应用。我以前在Rails 3中构建了相同的应用程序而且，尽管存在上述两个因素，我从来没有这样做过 Rails 3应用程序中的问题。 Javascript已经有了一些变化在Rails 4中。

问题：你能解释为什么display：block可能不像我之前那样（在我的Rails 3应用程序中），或告诉我如何调试它。

标记

<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 you 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>

Answer 1

尝试替换“display：block”
上

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

为什么显示：阻止css只是暂时保持开放状态

1 个答案: