Question

我在第一个rails应用程序中遇到了一些Javascript。

部分：_care_point.html.erb

<script>
  $(function() {
    $( ".draggable" ).draggable({grid: [50, 20]});
    $( ".node_input").each (function() {
      $(this).hide();
    });
    $("#<%="node.#{care_point.id}" %>").live('dblclick', function(){
      console.log('moo');
      jQuery(this).hide();
      jQuery('.node_input', jQuery(this).parent()).show();
    });
  });
</script>
<div id=<%="care_point.#{care_point.id}" %> class='draggable node_chin'>
  <div id=<%="node.#{care_point.id}" %> class='node'><%= care_point.body %>
  </div>
  <textarea class='node_input'><%= care_point.body %></textarea>
</div>

这是输出：

    <script> 
  $(function() {
    $( ".draggable" ).draggable({grid: [50, 20]});
    $( ".node_input").each (function() {
      $(this).hide();
    });
    $("#node.1").live('dblclick', function(){
      console.log('moo');
      jQuery(this).hide();
      jQuery('.node_input', jQuery(this).parent()).show();
    });
  });
</script> 
<div id=care_point.1 class='draggable node_chin'> 
  <div id=node.1 class='node'>Moo foo
  </div> 
  <textarea class='node_input'>Moo foo</textarea> 
</div>

我首先添加了基于类的dblclick事件监听器，但这导致它被多次添加。这使我将其更改为基于id的方法，但现在它不起作用。是因为我试图动态建立id？

这甚至是做这种事情的好地方吗？

Answer 1

尝试以下方法：

$("#<%="node.#{care_point.id}" %>").live('dblclick', function(){
      console.log('moo');
      jQuery(this).hide();
      jQuery('.node_input', jQuery(this).parent()).show();
    });

Answer 2

问题在于：

 $("#'#node.2'").live('dblclick', function(){

要工作，必须是：

 $('#node.2').live('dblclick', function(){

我不是红宝石的专家，但你必须在这里改变一些东西：

 $(<%="'#node.#{care_point.id}'" %>).dblclick(function(){

我会尝试（但我猜 - 编辑）

$('#<%=node.#{care_point.id} %>').dblclick(function(){

编辑 - 尝试删除HTML的ID中的点：看看这个小提琴http://jsfiddle.net/JeHuD/

替换

#<%=node.#{care_point.id} %>

with（在jquery选择器和HTML中都有（也考虑到你的html中的id应该有双引号，如：id =“node1”）

#<%=node#{care_point.id} %>

最终编辑 - 在jquery选择器中，must使用全部反斜杠转义点：这是更新的小提琴，适用于点http://jsfiddle.net/JeHuD/1/

我的.html.erb中的动态Javascript

2 个答案: