javascript - 从button_tag调用javascript函数？

Question

我有下一个带有 jquery 函数的文件:

assets/javascripts/poll_items.js

$(document).ready(function(){
    $('.up_id').on('click', function() {
    $(this).closest('.poll_row').insertAfter($(this).closest('.poll_row').next());
  });
  $('.down_id').on('click', function() {
    $(this).closest('.poll_row').insertBefore($(this).closest('.poll_row').prev());
  });
});

当我点击`= button_tag 'up', type: 'button', value: 'up', input_html: {class: 'up_id'}' 没有任何反应。如何更正文件 javascript 中的调用代码？

完整代码:

polls/new.html.haml

%h1= title "Новый опрос"
= simple_form_for @poll do |f|
  = f.error_messages header_message: nil
  = f.input :question, disabled: !@poll.editable?(current_user), input_html: { class: 'input-block-level' }
  = f.input :results_hidden, as: :boolean, inline_label: 'Скрыть результаты до окончания опроса', label: false
  = f.input :from_date, as: :datetime, input_html: { class: 'poll_date' }
  = f.input :to_date, as: :datetime, input_html: { class: 'poll_date' }
  %h3#poll-items Варианты ответа (не больше пяти)
  .item_index  
    = f.simple_fields_for :poll_items do |poll|
      = render 'poll_item_fields', f: poll
    = link_to_add_association 'Добавить еще вариант', f, :poll_items
    .form-actions
      = f.button :submit, 'Опубликовать опрос', class: 'btn-bg'
      %p 
        Вернуться к посту:
        = link_to @owner

poll_fields.html.haml

%h3#poll-items Варианты ответа (не больше пяти)
.item_index  
  = f.fields_for :poll_items do |poll|
    = render "poll_item_fields", f: poll
  .links
    = link_to_add_association 'Добавить еще вариант', f, :poll_items, render_options: {class: 'links'}

poll_item_fields.html.haml

.poll_row
  .poll_item
    = f.input :answer, input_html: { class: 'ctrlenter expanding' }, label: false, placeholder: 'Введите вариант ответа'
    = button_tag 'up', type: 'button', class: 'up_id', value: 'up'
    = button_tag 'down', type: 'button', class: 'down_id', value: 'down'
    = link_to_remove_association "удалить", f, { wrapper_class: 'poll_item' } 

Answer 1

我怀疑 DOM 正在动态构建，因此请尝试按如下方式更改 JS 代码:

$(document).ready(function(){
  $(document).on('click', '.up_id', function() {
    $(this).closest('.poll_row').insertAfter($(this).closest('.poll_row').next());
  });
  $(document).on('click','.down_id', function() {
    $(this).closest('.poll_row').insertBefore($(this).closest('.poll_row').prev());
  });
});

这里我们使用事件委托(delegate)技术将 click 事件传播到 DOM 中可能存在的所需 DOM 元素。