-2
In der folgenden js-Datei, zuerst on klicken Sie auf Ereignis funktioniert nicht, aber die zweite funktioniert. Dann dachte ich, delegate() hier zu verwenden, aber ich denke nicht delegate() wird mein Problem wegen this lösen. Kann jemand mir den Grund erklären, warum das erste on Klickereignis nicht auslöst. Jede Hilfe wäre willkommen.jQuery On funktioniert nicht
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.');
});
});
Hier ist mein HTML-Formular ...
<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 bitte .... –
Die wahrscheinliche Antwort ist, dass '# job_category_chosen' ein dynamisches Element später eingefügt ist, und Sie nicht verstehen, wie eine Delegation funktioniert. – adeneo
Ich habe '' body'' und 'document' auch zu' # job_category_chosen'' versucht ... –