Динамический Javascript в моем .html.erb - PullRequest
5 голосов
/ 15 июня 2011

Я борюсь с некоторым Javascript в моем первом приложении rails.

Частично: _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, но это привело к тому, что его добавляли несколько раз.Это заставило меня изменить его на подход, основанный на идентификаторе, но теперь он не работает.Это потому, что я пытаюсь динамически создать идентификатор?

Это даже подходящее место для подобных вещей?

Ответы [ 2 ]

3 голосов
/ 15 июня 2011

Попробуйте следующее:

$("#<%="node.#{care_point.id}" %>").live('dblclick', function(){
      console.log('moo');
      jQuery(this).hide();
      jQuery('.node_input', jQuery(this).parent()).show();
    });
2 голосов
/ 15 июня 2011

Проблема здесь:

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

Для работы это должно быть:

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

Я не эксперт по ruby, но вы должны что-то изменить здесь:

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

Я бы попробовал (но я угадал - отредактировал)

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

РЕДАКТИРОВАТЬ - Попробуйте удалить точки в идентификаторах HTML: посмотрите на эту скрипку http://jsfiddle.net/JeHuD/

заменить

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

на (как в селекторе jquery, так и в HTML (также учтите, что ваш идентификатор в html должен иметь двойные кавычки, например: id = "node1")

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

ЗАКЛЮЧИТЕЛЬНОЕ РЕДАКТИРОВАНИЕ - в селекторе jquery вы должны экранировать точки без обратной косой черты: вот обновленная скрипка, которая работает с точкой http://jsfiddle.net/JeHuD/1/

...