-2
次のjsファイルでは、最初にonクリックイベントは機能しませんが、2番目のイベントは機能しています。私はdelegate()を使用すると思ったが、thisのためにdelegate()が私の問題を解決するとは思わない。最初のonクリックイベントが発生していない理由を誰にでも教えてください。どんな助けもありがとう。jQueryがオンになっていない
jQuery(document).ready(function(){
jQuery('#job_category_chosen').on('click', '.search-choice-close', function(){
console.log('This is not working.');
});
jQuery(document).on('click', '#job_category_chosen .chosen-results', function(){
console.log('This is working.');
});
});
はここ
<form action="/submit-job-form/" method="post" id="submit-job-form" class="job-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Your account</label>
<div class="field account-sign-in">
You are currently signed in as aviator.
<a class="button" href="http://local.wordpress-trunk.dev/wp-login.php?action=logout&redirect_to=http%3A%2F%2Flocal.wordpress-trunk.dev%2Fsubmit-job-form%2F&_wpnonce=81838608ef">Sign out</a>
</div>
</fieldset>
<!-- Job Information Fields -->
<fieldset class="fieldset-job_title">
<label for="job_title">Title</label>
<div class="field required-field">
<input type="text" class="input-text" name="job_title" id="job_title" placeholder="" value="" maxlength="" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_location">
<label for="job_location">Location <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. "London"" value="" maxlength="">
<small class="description">Leave this blank if the location is not important</small> </div>
</fieldset>
<fieldset class="fieldset-job_region">
<label for="job_region">Listing Region</label>
<div class="field required-field">
<select name="job_region" id="job_region" class="postform">
<option class="level-0" value="13">Maharashtra</option>
<option class="level-1" value="12"> Pune</option>
<option class="level-1" value="14"> Thane</option>
<option class="level-0" value="15">New Delhi</option>
</select>
</div>
</fieldset>
<fieldset class="fieldset-application">
<label for="application">Contact email/URL</label>
<div class="field required-field">
<input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="[email protected]" maxlength="" required="">
</div>
</fieldset>
<fieldset class="fieldset-job_category">
<label for="job_category">Listing Category</label>
<div class="field required-field">
<select name="job_category[]" id="job_category" class="job-manager-category-dropdown " multiple="multiple" data-placeholder="Choose a category…" data-no_results_text="No results match" data-multiple_text="Select Some Options" style="display: none;">
<option class="level-0" value="17">HR</option>
<option class="level-1" value="7"> Development</option>
<option class="level-0" value="16">Sales</option>
<option class="level-0" value="18">Service</option>
<option class="level-0" value="19">test</option>
</select>
<div class="chosen-container chosen-container-multi" style="width: 176px;" title="" id="job_category_chosen">
<ul class="chosen-choices">
<li class="search-choice"><span> Development</span>
<a class="search-choice-close" data-option-array-index="1"></a>
</li>
<li class="search-choice"><span>Sales</span>
<a class="search-choice-close" data-option-array-index="2"></a>
</li>
<li class="search-choice"><span>HR</span>
<a class="search-choice-close" data-option-array-index="0"></a>
</li>
<li class="search-field">
<input type="text" value="Choose a category…" class="" autocomplete="off" style="width: 25px;">
</li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results">
<li class="result-selected level-0" style="" data-option-array-index="0">HR</li>
<li class="result-selected level-1" style="" data-option-array-index="1"> Development</li>
<li class="result-selected level-0" style="" data-option-array-index="2">Sales</li>
<li class="active-result level-0" style="" data-option-array-index="3">Service</li>
<li class="active-result level-0" style="" data-option-array-index="4">test</li>
</ul>
</div>
</div>
</div>
</fieldset>
<fieldset class="fieldset-job_hours">
<label for="job_hours">Hours of Operation <small>(optional)</small></label>
<div class="field ">
<table>
<tbody>
<tr>
<th width="40%"> </th>
<th align="left">Open</th>
<th align="left">Close</th>
</tr>
<tr>
<td align="left">Monday</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[1][start]" value="" autocomplete="off">
</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[1][end]" value="" autocomplete="off">
</td>
</tr>
<tr>
<td align="left">Tuesday</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[2][start]" value="" autocomplete="off">
</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[2][end]" value="" autocomplete="off">
</td>
</tr>
<tr>
<td align="left">Wednesday</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[3][start]" value="" autocomplete="off">
</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[3][end]" value="" autocomplete="off">
</td>
</tr>
<tr>
<td align="left">Thursday</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[4][start]" value="" autocomplete="off">
</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[4][end]" value="" autocomplete="off">
</td>
</tr>
<tr>
<td align="left">Friday</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[5][start]" value="" autocomplete="off">
</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[5][end]" value="" autocomplete="off">
</td>
</tr>
<tr>
<td align="left">Saturday</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[6][start]" value="" autocomplete="off">
</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[6][end]" value="" autocomplete="off">
</td>
</tr>
<tr>
<td align="left">Sunday</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[0][start]" value="" autocomplete="off">
</td>
<td align="left" class="business-hour">
<input type="text" class="timepicker ui-timepicker-input" name="job_hours[0][end]" value="" autocomplete="off">
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>
<fieldset class="fieldset-featured_image">
<label for="featured_image">Cover Image <small>(optional)</small></label>
<div class="field ">
<div class="job-manager-uploaded-files">
</div>
<input type="file" class="input-text wp-job-manager-file-upload" data-file_types="jpg|jpeg|gif|png" name="featured_image" id="featured_image" placeholder="">
<small class="description">
Maximum file size: 1 GB. </small> </div>
</fieldset>
<fieldset class="fieldset-gallery_images">
<label for="gallery_images">Gallery Images <small>(optional)</small></label>
<div class="field ">
<div class="job-manager-uploaded-files">
</div>
<input type="file" class="input-text wp-job-manager-file-upload" data-file_types="jpg|jpeg|gif|png" multiple="" name="gallery_images[]" id="gallery_images" placeholder="">
<small class="description">
Maximum file size: 1 GB. </small> </div>
</fieldset>
<fieldset class="fieldset-job_description">
<label for="job_description">Description</label>
<div class="field required-field">
<div id="wp-job_description-wrap" class="wp-core-ui wp-editor-wrap tmce-active">
<link rel="stylesheet" id="editor-buttons-css" href="http://local.wordpress-trunk.dev/wp-includes/css/editor.min.css?ver=4.4.2" type="text/css" media="all">
<div id="wp-job_description-editor-container" class="wp-editor-container">
<div id="mceu_8" class="mce-tinymce mce-container mce-panel" hidefocus="1" tabindex="-1" role="application" style="visibility: hidden; border-width: 1px;">
<div id="mceu_8-body" class="mce-container-body mce-stack-layout">
<div id="mceu_9" class="mce-toolbar-grp mce-container mce-panel mce-stack-layout-item mce-first" hidefocus="1" tabindex="-1" role="group">
<div id="mceu_9-body" class="mce-container-body mce-stack-layout">
<div id="mceu_10" class="mce-container mce-toolbar mce-stack-layout-item mce-first mce-last" role="toolbar">
<div id="mceu_10-body" class="mce-container-body mce-flow-layout">
<div id="mceu_11" class="mce-container mce-flow-layout-item mce-first mce-btn-group" role="group">
<div id="mceu_11-body">
<div id="mceu_0" class="mce-widget mce-btn mce-first" tabindex="-1" aria-labelledby="mceu_0" role="button" aria-label="Bold">
<button role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-bold"></i></button>
</div>
<div id="mceu_1" class="mce-widget mce-btn mce-last" tabindex="-1" aria-labelledby="mceu_1" role="button" aria-label="Italic">
<button role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-italic"></i></button>
</div>
</div>
</div>
<div id="mceu_12" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_12-body">
<div id="mceu_2" class="mce-widget mce-btn mce-first" tabindex="-1" aria-labelledby="mceu_2" role="button" aria-label="Bullet list">
<button role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-bullist"></i></button>
</div>
<div id="mceu_3" class="mce-widget mce-btn mce-last" tabindex="-1" aria-labelledby="mceu_3" role="button" aria-label="Numbered list">
<button role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-numlist"></i></button>
</div>
</div>
</div>
<div id="mceu_13" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_13-body">
<div id="mceu_4" class="mce-widget mce-btn mce-first" tabindex="-1" aria-labelledby="mceu_4" role="button" aria-label="Insert/edit link">
<button role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-link"></i></button>
</div>
<div id="mceu_5" class="mce-widget mce-btn mce-last" tabindex="-1" aria-labelledby="mceu_5" role="button" aria-label="Remove link">
<button role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-unlink"></i></button>
</div>
</div>
</div>
<div id="mceu_14" class="mce-container mce-flow-layout-item mce-last mce-btn-group" role="group">
<div id="mceu_14-body">
<div id="mceu_6" class="mce-widget mce-btn mce-first mce-disabled" tabindex="-1" aria-labelledby="mceu_6" role="button" aria-label="Undo" aria-disabled="true">
<button role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-undo"></i></button>
</div>
<div id="mceu_7" class="mce-widget mce-btn mce-last mce-disabled" tabindex="-1" aria-labelledby="mceu_7" role="button" aria-label="Redo" aria-disabled="true">
<button role="presentation" type="button" tabindex="-1"><i class="mce-ico mce-i-redo"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="mceu_15" class="mce-edit-area mce-container mce-panel mce-stack-layout-item" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;">
<iframe id="job_description_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press Alt-Shift-H for help" src='javascript:""' style="width: 100%; height: 172px; display: block;" data-gramm_id="4dc30845-5a2d-be30-1d8f-baeb161accb0"
data-gramm="true" gramm-ifr="true"></iframe>
<grammarly-btn>
<div style="visibility: hidden; z-index: 2;" class="_9b5ef6-textarea_btn _9b5ef6-not_focused" data-grammarly-reactid=".0">
<div class="_9b5ef6-transform_wrap" data-grammarly-reactid=".0.0">
<div title="Protected by Grammarly" class="_9b5ef6-status" data-grammarly-reactid=".0.0.0"> </div>
</div>
</div>
</grammarly-btn>
</div>
<div id="mceu_16" class="mce-statusbar mce-container mce-panel mce-stack-layout-item mce-last" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;">
<div id="mceu_16-body" class="mce-container-body mce-flow-layout">
<div id="mceu_17" class="mce-path mce-flow-layout-item mce-first">
<div role="button" class="mce-path-item mce-last" data-index="0" tabindex="-1" id="mceu_17-0" aria-level="0">p</div>
</div>
<div id="mceu_18" class="mce-flow-layout-item mce-last mce-resizehandle"><i class="mce-ico mce-i-resize"></i></div>
</div>
</div>
</div>
</div>
<textarea class="wp-editor-area" rows="8" autocomplete="off" cols="40" name="job_description" id="job_description" aria-hidden="true" style="display: none;"></textarea>
</div>
</div>
</div>
</fieldset>
<div id="wdmjm-sjf-main-div-ques">
<fieldset class="">hi26</fieldset>
<fieldset class="">hi27</fieldset>
<fieldset class="">hi34</fieldset>
</div>
<!-- Company Information Fields -->
<h2>Company Details</h2>
<fieldset class="fieldset-company_website">
<label for="company_website">Website <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="company_website" id="company_website" placeholder="http://" value="wisdmlabs.com" maxlength="">
</div>
</fieldset>
<fieldset class="fieldset-phone">
<label for="phone">Phone Number <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="phone" id="phone" placeholder="" value="" maxlength="">
</div>
</fieldset>
<fieldset class="fieldset-company_video">
<label for="company_video">Video <small>(optional)</small></label>
<div class="field ">
<input type="text" class="input-text" name="company_video" id="company_video" placeholder="A link to a video about your company" value="" maxlength="">
</div>
</fieldset>
<p>
<input type="hidden" name="job_manager_form" value="submit-job">
<input type="hidden" name="job_id" value="0">
<input type="hidden" name="step" value="0">
<input type="submit" name="submit_job" class="button" value="Preview">
</p>
</form>
HTMLください.... –
考えられる答えは、 '＃のjob_category_chosen'が後で挿入動的な要素であるということです、そしてあなたは、委任がどのように機能するかを理解していません。 – adeneo
「＃job_category_chosen」の代わりに 'body''と' document'を試しました... –