홈>
동적으로 추가 된 .add 버튼을 클릭하면 데이터에서 선택하기 위해 ajax를 호출하지만 첫 번째 모듈에서 m을 클릭하고 okey를 클릭하면 다음에 두 번째 모듈로 이동하여 클릭하면 ajax가 중복됩니다. 전화를 걸어 실수 한 위치를 모르는 필터 하나 더 추가했습니다. 문제를 해결하도록 도와주세요
여기 코드 :
하나의 모듈 :
$(document).ready(function () {
$("select").select2();
var $toggleColumns = $('.toggleColumns');
var datatableName = "list";
var $body = $("body");
var URL = 'xxx';
var columns = [
{'data': 'title', 'class': "datatable-row-title"},
{'class': '',
'orderable': false,
"mData": "comment_type_value", "mRender": function (data, type, full) {
if (data > 0) {
return '<label class="details-control" style="width:100%; height:100%;"> ' + translate('t_expand_comment_type_down') + ' </label>';
} else {
return "";
}
},
},
{'mData': 'item', "mRender": function (data, type, full) {
return data;
}},
{'data': 'seller'},
{'data': 'buyer'},
{'data': 'cat'},
{'data': 'comment_type'},
{'data': 'startts'},
{'data': 'endts'},
{'data': 'ts'},
{'data': 'price'},
{'data': 'qty'},
{'data': 'sales'},
];
var order = [];
<?php if (isset($_GET["filters"])): ?>
URL_TMP = URL;
URL_TMP += "?insert=false";
getAjaxDatatable(datatableName, URL_TMP, columns, order, "transaction");
URL_TMP = "";
<?php else: ?>
getButtonsAfterAdded();
$body.on("click", ".toggleColumnsButton", function (e) {
$("#columnsContainer").toggle("slow");
return false;
});
$body.on("click", ".remove", function (e) {
e.preventDefault();
$(this).parent().parent().remove();
getButtonsAfterRemove();
if ($("#list tbody tr").length > 0) {
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
loader.popup("hide");
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
}
resetSelect2();
});
$body.on("change", ".commentType", function () {
if ($("#list tbody tr").length > 0) {
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
}
});
$body.on("change", ".categories", function () {
if ($("#list tbody tr").length > 0) {
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
}
});
$body.on('click', ".add", function (e) {
e.preventDefault();
var filterID = $(this).parent().prev().find("option:selected").attr("data-filteroptionid");
$(".filters").append(filtersHTMLTransactionSelect(filterID));
var filterId = $(".filter:last-child .chooseFilter option:not(:disabled)").attr("data-filterOptionId");
$(".filter").last().prepend("<div class='col-sm-4 form-group sibling'>" + filtersHTMLTransactionValues(filterId) + "</div>");
$(".filter").last().append(getCollectionOfButtons());
resetSelect2();
transactionDatepicker();
getButtonsAfterAdded();
});
$body.on("keypress", function (e) {
if (e.keyCode == 13) {
loader.popup("show");
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
loader.popup("hide");
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
}
});
$body.on('click', ".search", function (e) {
e.preventDefault();
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
});
$toggleColumns.on('click', function (e) {
var column = $('#' + datatableName).DataTable().column($(this).attr('data-column'));
column.visible(!column.visible());
});
$(".csv").on("click", function (e) {
e.preventDefault();
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
$.ajax({
method: "POST",
url: "xxxx",
dataType: "JSON",
data: {
filters: getActiveFiltersTransaction(),
format: 1,
module_id: <?php echo \kontrola\TransactionActions::$MODULE_ID; ?>
},
success: function (response) {
getAccessMessageWithStatusDataTable(response);
getUses();
$.gritter.add({
title: translate('gritter_title_raports'),
text: $("#waitingTimeForFile").html(),
class_name: 'success'
});
$("[data-controller-name=raportsDownloaded]").css({
"color": "red"
});
setTimeout(function () {
$(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
color: "#505b72"
});
$.gritter.removeAll();
}, 15000);
}
});
});
$(".xls").on("click", function (e) {
e.preventDefault();
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
$.ajax({
method: "POST",
url: "xxx",
dataType: "JSON",
data: {
filters: getActiveFiltersTransaction(),
format: 0,
module_id: <?php echo \kontrola\TransactionActions::$MODULE_ID; ?>
},
success: function (response) {
getAccessMessageWithStatusDataTable(response);
getUses();
$.gritter.add({
title: translate('gritter_title_raports'),
text: $("#waitingTimeForFile").html(),
class_name: 'success'
});
$("[data-controller-name=raportsDownloaded]").css({
"color": "red"
});
setTimeout(function () {
$(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
color: "#505b72"
});
$.gritter.removeAll();
}, 15000);
}
});
});
$body.on("click", "#raportsScroll", function (e) {
e.preventDefault();
var top = $("[data-controller-name=raportsDownloaded]").offset().top;
top = 241 - 65;
$('html, body').animate({
scrollTop: top
}, 1000);
});
$body.on("change", ".chooseFilter", function () {
var filterId = $(this).find(":selected").attr("data-filterOptionId");
$(this).parent().prev().html(filtersHTMLTransactionValues(filterId));
// transactionDefaultStateOptions();
transactionDatepicker();
resetSelect2();
});
<?php endif; ?>
});
다른 모듈 :
$(document).ready(function () {
$("select").select2();
var $toggleColumns = $('.toggleColumns');
var datatableName = "list";
var $body = $("body");
var URL = 'xxx';
var columns = [
{'data': 'title', 'class': "datatable-row-title"},
{'mData': 'item', "mRender": function (data, type, full) {
return data;
}},
{'data': 'price'},
{'data': 'qty'},
{'data': 'user'},
{'data': 'cat'},
{'data': 'startts'},
{'data': 'endts'}
];
var order = [];
getButtonsAfterAdded();
<?php if (isset($_GET["filters"])): ?>
URL_TMP = URL;
URL_TMP += "?insert=false";
getAjaxDatatable(datatableName, URL_TMP, columns, order, "auction");
URL_TMP = "";
<?php else: ?>
$body.on("click", ".toggleColumnsButton", function (e) {
$("#columnsContainer").toggle("slow");
return false;
});
$body.on("click", ".remove", function (e) {
e.preventDefault();
$(this).parent().parent().remove();
getButtonsAfterRemove();
if ($("#list tbody tr").length > 0) {
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
loader.popup("hide");
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "auction");
}
$("select").select2("destroy");
$("select").select2();
});
$body.on("change", ".commentType", function () {
if ($("#list tbody tr").length > 0) {
getAjaxDatatable(datatableName, URL, columns, order, "auction");
}
});
$body.on("change", ".categories", function () {
if ($("#list tbody tr").length > 0) {
getAjaxDatatable(datatableName, URL, columns, order, "auction");
}
});
$body.on('click', ".add", function (e) {
e.preventDefault();
var filterID = $(this).parent().prev().find("option:selected").attr("data-filteroptionid");
$(".filters").append(filtersHTMLAuctionSelect(filterID));
var filterId = $(".filter:last-child .chooseFilter option:not(:disabled)").attr("data-filterOptionId");
$(".filter").last().prepend("<div class='col-sm-4 form-group sibling'>" + filtersHTMLAuctionValues(filterId) + "</div>");
$(".filter").last().append(getCollectionOfButtons());
$("select").select2("destroy");
$("select").select2();
auctionDatepicker();
getButtonsAfterAdded();
});
$body.on("keypress", function (e) {
if (e.keyCode == 13) {
loader.popup("show");
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
loader.popup("hide");
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "auction");
}
});
$body.on('click', ".search", function (e) {
e.preventDefault();
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "auction");
});
$toggleColumns.on('click', function (e) {
var column = $('#' + datatableName).DataTable().column($(this).attr('data-column'));
column.visible(!column.visible());
});
$(".csv").on("click", function (e) {
e.preventDefault();
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
$.ajax({
method: "POST",
url: "xxx",
dataType: "JSON",
data: {
filters: getActiveFiltersAuction(),
format: 1,
module_id: <?php echo \kontrola\AuctionActions::$MODULE_ID; ?>
},
success: function (response) {
getAccessMessageWithStatusDataTable(response);
getUses();
$.gritter.add({
title: translate('gritter_title_raports'),
text: $("#waitingTimeForFile").html(),
class_name: 'success'
});
$("[data-controller-name=raportsDownloaded]").css({
"color": "red"
});
setTimeout(function () {
$(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
color: "#505b72"
});
$.gritter.removeAll();
}, 15000);
}
});
});
$(".xls").on("click", function (e) {
e.preventDefault();
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
$.ajax({
method: "POST",
url: "xxxx",
dataType: "JSON",
data: {
filters: getActiveFiltersAuction(),
format: 0,
module_id: <?php echo \kontrola\AuctionActions::$MODULE_ID; ?>
},
success: function (response) {
getAccessMessageWithStatusDataTable(response);
getUses();
$.gritter.add({
title: translate('gritter_title_raports'),
text: $("#waitingTimeForFile").html(),
class_name: 'success'
});
$("[data-controller-name=raportsDownloaded]").css({
"color": "red"
});
setTimeout(function () {
$(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
color: "#505b72"
});
$.gritter.removeAll();
}, 15000);
}
});
});
$body.on("click", "#raportsScroll", function (e) {
e.preventDefault();
var top = $("[data-controller-name=raportsDownloaded]").offset().top;
top = 241 - 65;
$('html, body').animate({
scrollTop: top
}, 1000);
});
$body.on("change", ".chooseFilter", function () {
var filterId = $(this).find(":selected").attr("data-filterOptionId");
$(this).parent().prev().html(filtersHTMLAuctionValues(filterId));
auctionDefaultStateOptions();
auctionDatepicker();
$("select").select2("destroy");
$("select").select2();
});
<?php endif; ?>
});
<?php endif; ?>
아약스 호출 함수는 다음과 같습니다 :
function filtersHTMLAuctionSelect() {
var filters = "";
$.ajax({
method: "POST",
url: "xxxxx",
dataType: "JSON",
async: false,
success: function (response) {
filters += "<div class='filter'><div class='col-sm-4 form-group'>";
filters += "<select class='form-control chooseFilter' style='width: 100%;'>";
$.each(response, function (index, value) {
filters += "<option data-filterOptionId=" + value.id + ">" + translate(value.title) + "</option>";
});
filters += "</select>";
}
});
filters += "</div></div>";
return filters;
}
좋아요. 버튼을 동적으로 추가하면 문제가 해결됩니다.
$body.off('click', '#add').on('click', "#add", function (e) {
$body.off('click', '#search').on('click', "#add", function (e) {
나에게 효과적입니다.
HTML 버튼 그룹 :
<div class="col-sm-4 form-group">
<div class="col-lg-3"></div>
<div class="col-lg-1"></div>
<button class="add btn btn-success btn-quirk col-sm-3" id="add"><i class="glyphicon glyphicon-plus"></i></button>
<div class="col-lg-1"></div>
<button class="search btn btn-warning btn-quirk col-sm-3" id="search"><i class="glyphicon glyphicon-search"></i></button>
</div>
- 답변 # 1
- 답변 # 2
때때로이 문제는 내부에 자식을 포함하는 요소에 대해 ajax 호출을 만들고 자식에 대해서도 반복적으로 호출하는 경우에 나타납니다. 그리고 Thanpa 솔루션을 사용해보십시오-
$('#add').on('click', function (e) {
관련 자료
- inno setup - 설치 후가 아닌 완료 버튼을 클릭 한 후 응용 프로그램을 실행하십시오
- 마커를 클릭 한 후 Java Android 열린 snackBar
- facebook - 그래프 API 210으로 업그레이드 한 후 예기치 않은 "이 사용자 대신 API를 호출 할 수 없습니다"
- python으로 셀레늄 웹 드라이버에서 - : before/:: after cc 태그를 클릭하는 방법은 무엇입니까?
- jquery - 자바 스크립트에서 일정 시간이 지난 후 버튼의 클릭 이벤트를 트리거하는 방법
- reactjs - 버튼 클릭시 정렬 방법이 실행 된 후보기 업데이트
- reactjs - 반응시 버튼을 클릭 한 후 테이블 열기
- ios - 스토리 보드 대신 프로그래밍 방식의보기를 추가 한 후 예상치 못한 nil
- python 3.x - 행의 중복 콤보 값을 제거한 후 중복이 제거되지 않습니다
- 테이블 열을 클릭 한 후 입력 필드에 초점 설정 (Angular 7)
- reactjs - 클릭 후 상태 변경 후 지연 후 다시 변경하고 React에 메시지 표시
- split - 중복없이 strsplit 후 R 페이스트
- javascript - 클릭 후 Material-UI 버튼이 사라짐
- javascript - Cypress는 클릭 후 무언가를합니다
- dart - 처음 클릭 한 후 버튼을 비활성화하는 방법
- javascript - 다른 항목을 삽입 한 후 actionEventListener ( "click")가 작동하지 않습니다
- angularjs - 클릭 버튼 후 조건에서 앵귤러 UI 모달을 닫는 방법
- css - 워드 프레스 사이트의 모바일보기에서 메뉴 뒤에 예기치 않은 공간이 생기나요?
- jquery - 페이지를 새로 고치지 않고 클릭 한 후 호버 하위 메뉴 닫기
- protractor - 크롬으로 마우스를 가져간 후 요소를 클릭 할 수 없음
관련 질문
- javascript - 여러 PHP 페이지에서 AJAX 함수의 채워진 변수로 SQL 쿼리 업데이트
- php - Javascript 함수는 테이블의 첫 번째 행에서만 작동합니다
- javascript - 제출 버튼을 간접적으로 클릭해도 $_POST [ 'submit']이 설정되지 않습니다
- javascript - id 요소의 하위 고양이를 가져 오는 jquery click 함수
- javascript - 이 코드를 실행할 때 오류 관리자가 정의되지 않았습니다
- javascript - 로그인 할 때마다 URL을 변수와 연결하는 방법
- javascript - 호버 지연시 클래스 전환
- javascript - pdo 쿼리에서 서버 측 데이터 테이블을 작성하려고합니다
- javascript - 코르도바에서 현재 위치를 가져 오는 동안 "REQUEST_DENIED"를 수정하는 방법
- javascript - DataTablejs를 사용하여 js 소스 데이터에 대한 개별 열 검색 필터
전파를 중단해야 할 수도 있습니다. 이것은 버블 링 문제 일 수 있습니다.
전화 할 때
또한 호출 중지 전파는 코드를 다음과 같이 만듭니다 :
자세한 내용은 https://api.jquery.com/event.stoppropagation/
를 참조하십시오.수정 :
잘못 될 수있는 또 다른 일이 여기 있습니다 :
사용해보십시오