[我正在Symfony 5框架中构建一个调度程序/花名册应用程序，其后有webpack，并与Jquery一起处理（以及其他）基于用户的操作（例如单击单元格）。
[当用户单击一个单元格时，将弹出一个模式，该模式中包含一个链接到该单元格的数据的表单。我想捕获模态中包含的表单的提交，然后向后端触发AJAX调用，以便存储数据。
请参阅下面到目前为止我拥有的当前JQUERY代码。我当前捕获了show.bs.modal事件。之后，我想保留默认的提交动作，并用我自己的动作替换。
但是，当我尝试这样做时，我得到了臭名昭著的“ $不是函数”错误。
我已经尝试了几种方法（甚至在模态本身中包括了javascript），但即使在这里它也失败了。我现在有点卡住。
有人知道我做错了吗？
我什至在函数中尝试了jquery.noconflict（）方法，但这也不幸失败了。
require('../css/app.css');
require('../css/global.scss');
require('bootstrap-datepicker/dist/css/bootstrap-datepicker.css');
require('@fortawesome/fontawesome-free/css/all.min.css');
// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
const $ = require('jquery');
const routes = require('../../public/js/fos_js_routes.json');
require('bootstrap');
require('bootstrap-datepicker');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
import dt from 'datatables.net';
import dtbs4 from 'datatables.net-bs4';
import dtbs4fh from 'datatables.net-fixedheader-bs4';
import dtbs4sel from 'datatables.net-select-bs4';
var moment = require('moment');
moment().format();
Routing.setRoutingData(routes);
$( document ).ready(function() {
var table = $("#calendarSchedule").DataTable({
select: {
style: 'os',
items: 'cell',
info: false
}
});
jQuery.noConflict();
//table.on( 'select', function ( e, dt, type, indexes ) {
//e.preventDefault();
//if ( type === 'cell' ) {
var clickDate = undefined;
var dt = undefined;
var cell = undefined;
var colIndex = undefined;
$('.dataTable').on('click', 'tbody td div', function() {
var x = event.clientX;
var y = event.clientY;
var w = $(window).width();
dt = $('#YearMonth').text();
clickDate = this.id;
console.log(clickDate);
if(this.id.indexOf("-")== -1){
var url = Routing.generate('schedule_viewModal', { id: this.id });
$("#scheduleModal").load(url);
$("#scheduleModal").find('schedule_entry').trigger('reset');
var element = document.getElementById("scheduleModal");
if(x + 500 > w){
element.style.left = w - 500 + "px";
} else {
element.style.left = x + "px";
}
element.style.top = y + "px";
$("#scheduleModal").modal('show');
} else {
var dayType = $(this).attr("class").split(" ")[0];
console.log(dayType);
var url = Routing.generate('schedule_createModal', { dt: clickDate, type: dayType });
$("#scheduleModal").load(url);
$("#scheduleModal").find('schedule_entry').trigger('reset');
var element = document.getElementById("scheduleModal");
if(x + 500 > w){
element.style.left = w - 500 + "px";
} else {
element.style.left = x + "px";
}
element.width = 250 + "px";
element.height = 250 + "px";
element.style.top = y + "px";
$("#scheduleModal").modal('show');
if($(this).find("div").length == 0){
var x = event.clientX;
var y = event.clientY;
var w = $(window).width();
}
};
});
$('#scheduleModal').on('shown.bs.modal', function () {
$('.js-new-form').on('submit', function(e){
e.preventDefault();
route = '{{ path("schedule_jsonNew") }}';
var dt = document.getElementById('schedule_entry_ScheduleDate').value;
var tp = document.getElementById('schedule_entry_ScheduleType').value;
var cat = document.getElementById('schedule_entry_Category').value;
var emp = document.getElementById('schedule_entry_Employee').value;
var entry = {date: dt, type: tp, category: cat, employee: emp};
var data = JSON.stringify(entry);
console.log(data);
$.ajax({
url: route,
type: "POST",
dataType: "json",
data: data,
async: true,
success: function () {
console.log('succes');
location.reload();
},
error: function () {
console.log('fail');
location.reload();
},
})
});
var $=jQuery.noConflict();
$('#btnClose').on('click', function(e){
//location.reload();
});
$(".js-close-modal").click(function(){
console.log("bla");
$(".modal").removeClass("visible");
});
});
});
下面是模态本身的树枝模板：
{# empty Twig template #}
{% trans_default_domain 'messages' %}
<div class="modal__header">
{% trans %}schedule.new{% endtrans %}
</div>
<div class="container-fluid">
{{ form_start(form, {
'attr': {
'class': 'js-new-form',
'id': 'js-new-form' }})}}
<div style="margin-bottom: 5px; margin-top: 5px" class="row">
<div class="col-md-6">
{{ form_label(form.ScheduleDate, 'schedule.ScheduleDate'|trans({}, 'messages')) }}
</div>
<div class="col-md-6">
{{ form_widget(form.ScheduleDate) }}
</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px" class="row">
<div class="col-md-6">
{{ form_label(form.ScheduleType, 'schedule.ScheduleType'|trans({}, 'messages')) }}
</div>
<div class="col-md-6">
{{ form_widget(form.ScheduleType) }}
</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px" class="row">
<div class="col-md-6">
{{ 'schedule.scheduleCategory'|trans({}, 'messages') }}
</div>
<div class="col-md-6">
{{ form_widget(form.scheduleCategory) }}
</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px" class="row">
<div class="col-md-6">
{{ 'schedule.scheduleEmployee'|trans({}, 'messages') }}
</div>
<div class="col-md-6">
{{ form_widget(form.scheduleEmployee) }}
</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px" class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
{{ form_errors ( form ) }}
</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px" class="row">
<div class="col-md-6">
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="btnClose">Close</button>
</div>
<div class="col-md-6">
{{ form_widget(form.schedulesave) }}
</div>
</div>
{{ form_end(form) }}
</div>
我认为绑定有问题。您可以从.on('shown.bs.modal'中删除绑定。由于jquery需要开箱即用进行绑定。当前的代码就像一次又一次地绑定。可以避免的。
$('#scheduleModal').on('shown.bs.modal', function () {
})
$('.js-new-form').on('submit', function(e){
e.preventDefault();
route = '{{ path("schedule_jsonNew") }}';
var dt = document.getElementById('schedule_entry_ScheduleDate').value;
var tp = document.getElementById('schedule_entry_ScheduleType').value;
var cat = document.getElementById('schedule_entry_Category').value;
var emp = document.getElementById('schedule_entry_Employee').value;
var entry = {date: dt, type: tp, category: cat, employee: emp};
var data = JSON.stringify(entry);
console.log(data);
$.ajax({
url: route,
type: "POST",
dataType: "json",
data: data,
async: true,
success: function () {
console.log('succes');
location.reload();
},
error: function () {
console.log('fail');
location.reload();
},
})
});
var $=jQuery.noConflict();
$('#btnClose').on('click', function(e){
//location.reload();
});
$(".js-close-modal").click(function(){
console.log("bla");
$(".modal").removeClass("visible");
});