0

テキストボックスがクリックされるたびに呼び出されるjavascriptクリック関数がありますが、何らかの理由で、テキストボックスがメインページ内にある場合にのみ機能します。テキストボックスをパーシャルに移動すると、クリックしても何も表示されません。 。クリックイベントをパーシャル内で機能させる方法を知っている人はいますか？

私のusers.js.coffeeファイル

$ ->
  $("form[data-update-target]").live "ajax:success", (evt, data) ->
    target = $(this).data("update-target")
  $("#" + target).html data

  $("input.submit").click ->
    $(this).parent().submit()
    true

  $("#datepicker").click ->
    alert "hello world"

ユーザー向けの新しいページ

<%= form_tag({:controller => 'users', :action => 'preview'}, :remote => true, :'data-update-target' => 'update-container') do %>
  <%= radio_button_tag(:page_type, 'event', false, :class => 'submit') %>
  <%= label_tag(:page_type, "Event") %>
  <br/>
<% end %>
<div id="update-container">
</div>

ユーザーコントローラー

def preview
  if params[:page_type] == "event"
    @event = Event.new
    render :partial => 'event', :object => @event
  end
end

部分的に_event.html.erbと呼ばれるイベント

<%= form_for(@event) do |f| %>
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :description %>
    <%= f.text_area :description %>
  </div>
  <div class="field">
    <%= f.label :start %>
    <input id="datepicker" type="text" value="" name="event_start">
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

生成されたhtml

<body>
<p id="notice"></p>
<p id="alert"></p>
  <h1>New page</h1>

<form accept-charset="UTF-8" action="/users/preview" data-remote="true" data-update-target="update-container" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="iIodOQohxJgk1P5ZmFrbgw4W/h4cq45LBxGN3xjyREk=" /></div>

<input class="submit" id="page_type_event" name="page_type" type="radio" value="event" />
<label for="page_type">Event</label>
<br/>
</form><div id="update-container">
</div>
<input id="datepicker" type="text" value="" name="event_start">

<a href="/users">Back</a>
</body>
4

1 に答える 1

0

クイックアンサー：送信クラスには入力がありません。送信クラスを適切な入力要素に追加するか、セレクターを次のようなものに変更します。$('input[type=submit]')

一方、クラスをjsの動作のみに使用する場合、通常js-は名前の前に付加するため、デザイナーはクラスを削除（またはスタイリング）しないようにする必要があることを認識しています。

ただし、問題がページの読み込み時に日付ピッカーがレンダリングされないことが原因である場合（たとえば、後でjavascriptで追加される場合）、コールバックを別の方法で宣言する必要があります。

ページが最初にレンダリングされてから存在する日付ピッカーの親を選択します（存在しない場合は、を使用できますdocument）。この場合、親はdiv#update-container次のとおりです。

$("#update_-container").on 'click', '#datepicker', (evt) ->
    # code here....

詳細については、公式のjQueryドキュメントをご覧ください

于 2012-11-06T22:15:00.580 に答える