我有一些显示和隐藏一些帮助文本的 javascript。除非存在 select2 字段,否则每次都可以正常工作。
HTML:
<div class="help-wrap">
<div class="form-group">
<label class="control-label required" for="s2id_autogen1">Occupation</label>
<div class="select2-container form-control select2 select2-allowclear" id="s2id_milestone_client1_occupation"><a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1"> <span class="select2-chosen">Abstractor</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow"><b></b></span></a><input class="select2-focusser select2-offscreen" type="text" id="s2id_autogen1"><div class="select2-drop select2-display-none select2-with-searchbox"> <div class="select2-search"> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input"> </div> <ul class="select2-results"> </ul></div></div>
<select class="form-control select2 select2-offscreen" id="milestone_client1_occupation" name="milestone[client1_occupation]" tabindex="-1"><option value=""> </option>
<option value="001">Abattoir Worker</option>
<option value="C89">Zoology Consultant</option>
</select>
</div>
<span class="fa fa-question-circle"></span>
<div class="help-text">
Please select your occupation, if you cannot find an exact match for your occupation then please choose the closest match.
</div>
</div>
咖啡脚本:
$(document).on 'page:load', ->
$(document).on 'click', (e) ->
$('.help-wrap span').each (i,el) ->
trig = el
if trig != e.target && !$(trig).has(e.target).length
$(trig).removeClass('active')
$(trig).parents('.help-wrap').find('.help-text').hide()
else
$(trig).parents('.help-wrap').find('.help-text').toggle()
$(trig).toggleClass('active')
当我单击跨度时,它会切换是否显示帮助文本 - 除非存在 select2 字段,否则这工作正常。在这种情况下,什么都不会发生?
单击页面上除跨度之外的任何位置都会按预期隐藏帮助文本。
提前致谢