홈>
동적으로 추가 된 .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) {
관련 자료
- javascript - 경로를 다시 추가 한 후 D3 클릭 이벤트가 작동하지 않습니다
- javascript - 메뉴의 링크를 클릭 한 후 메뉴를 닫도록하려면 어떻게해야합니까?
- html - 버튼 클릭 후 전자 각도, 창이 존재하지 않는 경로로 리디렉션됩니다
- javascript - 버튼 클릭 해결을 기다리는 방법을 추가 한 후
- javascript - 다른 항목을 삽입 한 후 actionEventListener ( "click")가 작동하지 않습니다
- inno setup - 설치 후가 아닌 완료 버튼을 클릭 한 후 응용 프로그램을 실행하십시오
- java - Android에서 클릭 이벤트 후에도 이전 텍스트 표시
- c# - wpf - listview를 클릭 한 후 포커스 설정
- reactjs - js를 클릭하여 텍스트 영역에 "버튼 값"을 추가하는 방법
- html - 점 버튼을 클릭 한 후 JavaScript 슬라이더가 너무 빠르게 반복됩니다
- angular - 동기화 클릭 후 BehaviorSubject에서 값을 가져 오는 방법은 무엇입니까?
- javascript - Google Analytics 이벤트를 추가 한 후 vue 클릭 이벤트가 중단 되었습니까?
- Python에서 Tkinter를 사용하여 버튼 클릭 후 이전 프레임으로 돌아가는 방법은 무엇입니까?
- mysql - 중복 제거 후 합계하는 방법
- flutter - 클릭 후 TextFormField 지우기
- css html에서 클릭 후 이미지 변경
- javascript - 클릭 후 자식을 추가 할 수 없음
- django - 제출 버튼을 클릭해도 댓글이 추가되지 않습니다
- extjs - 연결된 인터페이스가로드 된 후 Click 이벤트를 트리거하는 방법은 무엇입니까?
- javascript - Ajax를 사용하여 데이터를 표시 한 후 앵커 태그 클릭 이벤트가 작동하지 않음
관련 질문
- javascript : AJAX를 통해 POST 요청을 보내는 중 오류가 발생하면 JS 함수가 작동하지 않습니다.
- javascript : CodeIgniter 403 (금지됨)이있는 Ajax 요청
- javascript : Laravel Ajax 페이지 매김 링크 두 번째 페이지에서 새로 고침을 클릭하십시오
- javascript : 특정 DIV (텍스트 추가)에서 N 번째 자식을 사용 하는가?
- javascript : 팝업 창 및 PHP 양식
- javascript : Ajax Auto Reload 테이블은 실행되지 않습니다
- php : 이미지를 회전시키고 이미지를 저장하는 방법
- javascript : jQuery의 입력 필드에서 여러 값을 가져 오는 방법은 무엇입니까?
- javascript : 양식 jQuery를 제출하십시오
- javascript : 부트 스트랩 SelectPicker가 동적으로 추가 될 때 작동하지 않습니다
전파를 중단해야 할 수도 있습니다. 이것은 버블 링 문제 일 수 있습니다.
전화 할 때
또한 호출 중지 전파는 코드를 다음과 같이 만듭니다 :
자세한 내용은 https://api.jquery.com/event.stoppropagation/
를 참조하십시오.수정 :
잘못 될 수있는 또 다른 일이 여기 있습니다 :
사용해보십시오