Dynamisches Javascript in meiner .html.erb

Question

Ich bin mit einigen Javascript in meinem ersten Rails-Anwendung kämpfen.

Teilweise: _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>

Dies ist die Ausgabe:

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

Ich fügte zunächst den dblclick-Ereignis-Listener klassenbasiert hinzu, was jedoch dazu führte, dass er mehrfach hinzugefügt wurde. Dies veranlasste mich, es zu einem id-basierten Ansatz zu ändern, aber jetzt funktioniert es nicht. Liegt es daran, dass ich versuche, die ID dynamisch zu erstellen?

Ist dies überhaupt der richtige Ort, um so etwas zu tun?

Answer 1

Versuchen Sie das Folgende:

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

Answer 2

Das Problem liegt hier:

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

Damit es funktioniert, muss es sein:

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

Ich bin kein Experte für Ruby, aber Sie müssen hier etwas ändern:

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

Ich würde es versuchen (aber ich schätze - editiert)

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

EDIT - Versuchen Sie, die Punkte in den IDs des HTML zu entfernen: Sehen Sie sich diese Anleitung an http://jsfiddle.net/JeHuD/

ersetzen.

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

mit (sowohl im jquery-Selektor als auch in der HTML-Datei (beachten Sie auch, dass Ihre id in der HTML-Datei in Anführungszeichen gesetzt werden sollte: id="node1")

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

FINAL EDIT - im Jquery-Selektor müssen Sie muss escape dots withdoubole backslashes: hier ist das aktualisierte fiddle, das mit dem Punkt funktioniert http://jsfiddle.net/JeHuD/1/