coffeescript jquery on click delegate function rails答案

【问题标题】：coffescript jquery on click delegated function railscoffeescript jquery on click delegate function rails
【发布时间】：2017-03-30 06:44:46
【问题描述】：

我有问题，我输入了event_dodavatel，在那个字段上是keyup 声明加载json。但我无法点击 id 为 doplnovac 的 div。

谁能给我提示？

html:

<input type="text" name="event[dodavatel]" id="event_dodavatel" />
<textarea name="event[adresa]" id="event_adresa"></textarea>

生成的自动完成片段：

<div id="help">
<div id="napoveda" class="list-group sm">
<div class="doplnovac" id="14" data-name="Vitana a.s.                 +" data-adresa="Mělnická 133" data-city="Byšice">Vitana a.s.                 +</div>
<div class="doplnovac" id="4751" data-name="Vitana,a.s. - catering" data-adresa="Mělnická 133" data-city="Byšice">Vitana,a.s. - catering</div>
</div>
</div>

咖啡脚本

String::replaceAll = (stringFind, stringReplace) ->
ex = new RegExp(stringFind.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, 
'\\$1'), 'g')
@replace ex, stringReplace

jQuery ->
  $(document).on "click", ".doplnovac",(event) ->
    $('#event_dodavatel').val $this.data('name')
    $('#event_adresadodavatel').val $this.data('adresa') + ' ' + $this.data('city')
    $('#help').empty()
    event.preventdefault()
    return
  $('#event_dodavatel').keyup ->
  $('#help').empty()
  $.getJSON 'local web/'+$(this).val(), (data) ->
    items=[]
    $.each data.data, (i, item) ->
      items.push("<div class='doplnovac' id='"+item.Internal+"' data-name='"+item.Name1+"' data-adresa='"+item.Street+"' data-city='"+item.City+"'>" +item.Name1+ "</div>");
    $('<div>',
      'id': 'napoveda'
      'class': 'list-group sm'
      html: items.join('')).appendTo '#help'
  return
return
$('.kalendar').datepicker({ beforeShowDay: 
$.datepicker.noWeekends,defaultDate: new Date() });
$('#q_datum_eq').datepicker({ beforeShowDay: 
$.datepicker.noWeekends,defaultDate: new Date() });
$('#q_datum_eq').change ->
@form.submit()
return
$('#q_cil_id_eq').change ->
@form.submit();
return
$('#tisk').click ->
window.print()
return

【问题讨论】：

你也可以添加你的 div html 吗？如果该 div 上应用了任何 css
嗨，我正在更新我对生成的 div doplnovac 的问题
您的 html 显示多个项目共享同一个 id doplnovac，这就是原因，您的点击可能无效。
好吧，我发送了自动完成功能，所以我生成了三个或四个具有相同 ID 的项目组，我将其放入主键的 id 部分
元素 ID 在整个文档中应该是唯一的。

标签： javascript jquery ruby-on-rails coffeescript

【解决方案1】：

html:

<div id="help">
  <div id="napoveda" class="list-group sm">
   <div class="list-group-item doplnovac" data-name="Vitana a.s.                 +" data-adresa="Mělnická 133" data-city="Byšice">Vitana a.s.                 +</div>
   <div class="list-group-item doplnovac" data-name="Vitana,a.s. - catering" data-adresa="Mělnická 133" data-city="Byšice">Vitana,a.s. - catering</div>
  </div>
</div>

jquery:

jQuery ->
  $(document).on "click", ".doplnovac",(event) ->
    $('#event_dodavatel').val $this.data('name')
    $('#event_adresadodavatel').val $this.data('adresa') + ' ' + $this.data('city')
    $('#help').empty()
    event.preventdefault()
    return
  $('#event_dodavatel').keyup ->
  $('#help').empty()
  $.getJSON 'local web/'+$(this).val(), (data) ->
    items=[]
    $.each data.data, (i, item) ->
      items.push("<div class='list-group-item doplnovac' data-name='"+item.Name1+"' data-adresa='"+item.Street+"' data-city='"+item.City+"'>" +item.Name1+ "</div>");
    $('<div>',
      'id': 'napoveda'
      'class': 'list-group sm'
      html: items.join('')).appendTo '#help'
  return
return

【讨论】：

我用类的用法更新了我的问题，但仍然无法点击感谢所有想法