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